如何繪製聊天氣泡使用純CSS

-8

我找到更多的樣本來繪製聊天氣泡使用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>

來源

2017-10-11 Chunbin Li

請添加您嘗試過的代碼。 – frnt

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

我不知道如何實現，但這會幫助你 https://codepen.io/Founts/pen/gmhcl –

這個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 demo。

來源

2017-11-04 03:28:15

如何繪製聊天氣泡使用純CSS

回答

相關問題