[英]how to draw a chat bubbles use Pure CSS
我發現更多使用 CSS 繪制聊天氣泡的示例,但我找不到如何繪制這個氣泡,我不知道頂部的角度
首先,謝謝,這些問題中的所有建議,我錯誤地沒有上傳我嘗試過的代碼。
最后,謝謝,@holden 回答是正確的,我在知道如何使用三角形后上傳我的代碼:after,如果有人有同樣的問題,我想它可以給你一些想法:)
如果你想編輯我的最終代碼,你可以去在線編輯器( https://jsfiddle.net/ypgou3wy/ )
/* layout */ body { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .logo { display: inline-block; } /* main */ @mixin tringleWithInCircule() { position: absolute; top: -22px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 0 37px 43px; border-top-right-radius: 5px; border-color: transparent transparent blue transparent; } .logo { width: 100px; height: 100px; border-radius: 100%; background: blue; position: relative; } .logo1:after { content: ''; position: absolute; top: -22px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 0 37px 43px; border-top-right-radius: 5px; border-color: transparent transparent blue transparent; } .logo2 { transform: scaleY(-1); } .logo2:after { content: ''; position: absolute; top: -22px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 0 37px 43px; border-top-right-radius: 5px; border-color: transparent transparent blue transparent; } .logo3 { transform: scaleY(-1) scaleX(-1); } .logo3:after { content: ''; position: absolute; top: -22px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 0 37px 43px; border-top-right-radius: 5px; border-color: transparent transparent blue transparent; } .logo4 { transform: scaleX(-1); } .logo4:after { content: ''; position: absolute; top: -22px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 0 37px 43px; border-top-right-radius: 5px; border-color: transparent transparent blue transparent; }
<div class="logo logo1"> </div> <div class="logo logo2"> </div> <div class="logo logo3"> </div> <div class="logo logo4"> </div>
這是創建語音氣泡的代碼。 您也可以在此處更改變量和指針位置
.speech-bubble {
position: relative;
background: #00aabb;
border-radius: .4em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin-left: -15px;
margin-bottom: -30px;
}
這個 CSS 應該讓你開始,只是玩弄它:
#speech-bubble {
width: 120px;
height: 80px;
background: blue;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 3px solid transparent;
border-right: 26px solid blue;
border-bottom: 23px solid transparent;
margin: 13px 0 0 -25px;
}
這是JS Bin 演示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.