css 實(shí)現(xiàn)小尖角聊天對話框帶尖角的說話泡泡效果
發(fā)布時間：2020-04-10 15:57:15 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css 實(shí)現(xiàn)小尖角聊天對話框帶尖角的說話泡泡效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
一、css 繪制實(shí)現(xiàn)小尖角聊天對話框，帶尖角的說話泡泡，先給大家展示下效果圖，感覺不錯請參考實(shí)例代碼。
二、效果
三、代碼
css;toolbar:false"><style>
#talkbubble {
width: 160px; height: 80px;
background: red;
position: relative;
border-radius: 10px;
margin-left:20px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>
補(bǔ)充：純css實(shí)現(xiàn)氣泡對話框尖角處理
先來看一下效果圖：
簡單粗暴上代碼：
html：
<div class="dialog-box">
<span class="bot"></span>
<span class="top"></span>
</div>
less:
.dialog-box {
position: relative;
span {
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
&.bot{
border-width: 15px;
border-style: solid dashed dashed;
border-color: transparent transparent #F9743A transparent;
left: 15px;
top: -29px;
}
&.top{
border-width:13px;
border-style:solid dashed dashed;
border-color:transparent transparent #fff transparent;
left:17px;
top:-25px;
}
}
}
大白話講解：
如果你想要其他方位的尖角，就調(diào)整boder-color的順序（上，右，下，左）。
主要的原理大概是有兩個一樣形狀，比例不同的小三角，一個和底色一樣的實(shí)心三角bot，一個白色底的top，并且top是會蓋在bot上面的，然后調(diào)整它們的大?。ㄒ话銇碚f實(shí)心要比白色塊大一點(diǎn)，這樣才可以顯示出有眼色的邊邊?。?。
最后想盡一切辦法讓它們重合（白色的top在上面，實(shí)心的bot在下面），最后通過調(diào)整絕對定位的參數(shù)（left，top）讓其重合的天衣無縫。好了，大功告成啦，不知道你get到了沒有？
總結(jié)
到此這篇關(guān)于css 實(shí)現(xiàn)小尖角聊天對話框帶尖角的說話泡泡效果的文章就介紹到這了,更多相關(guān)css 尖角聊天對話框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3軟件卸載對話框代碼 根據(jù)是否卸載出現(xiàn)不同表情
這是一個對話框插件，它主要用來卸載軟件時的提示，特點(diǎn)在于，當(dāng)用戶選擇保留和卸載后，對話框中間的表情會根據(jù)用戶選擇發(fā)生動態(tài)變化，非?？蓯?。需要的朋友前來下載2019-07-29
對話框小尾巴，估計(jì)大家在實(shí)際開發(fā)中應(yīng)該經(jīng)常遇到過，省事點(diǎn)的就是叫設(shè)計(jì)小姐姐給切個帶小尾巴的背景圖，那不省事的呢？這篇文章主要介紹了CSS對話框小尾巴,需要的朋友可以2019-05-16
這篇文章主要介紹了純CSS實(shí)現(xiàn)氣泡對話框尖角處理的實(shí)現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-26用純css3和html制作泡沫對話框?qū)崿F(xiàn)代碼
泡沫對話框是一種比較流行的趨勢因?yàn)樗淖兞藗鹘y(tǒng)，通常情況下都是使用html和javascript或者是圖片來實(shí)現(xiàn)，接下來為大家介紹下使用css3配合html來實(shí)現(xiàn)一些簡單的泡沫對話框2013-03-21純CSS代碼實(shí)現(xiàn)各類氣球泡泡對話框效果
利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內(nèi)容，沒有兼容性的問題，我之前在純CSS實(shí)現(xiàn)各類氣球泡泡對話框效果一文中算是比較詳細(xì)的講述了CSS2010-12-27
