css 實(shí)現(xiàn)小尖角聊天對(duì)話框帶尖角的說(shuō)話泡泡效果
我要評(píng)論一、css 繪制實(shí)現(xiàn)小尖角聊天對(duì)話框，帶尖角的說(shuō)話泡泡，先給大家展示下效果圖，感覺(jué)不錯(cuò)請(qǐng)參考實(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)氣泡對(duì)話框尖角處理
先來(lái)看一下效果圖：
簡(jiǎ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的順序（上，右，下，左）。
主要的原理大概是有兩個(gè)一樣形狀，比例不同的小三角，一個(gè)和底色一樣的實(shí)心三角bot，一個(gè)白色底的top，并且top是會(huì)蓋在bot上面的，然后調(diào)整它們的大?。ㄒ话銇?lái)說(shuō)實(shí)心要比白色塊大一點(diǎn)，這樣才可以顯示出有眼色的邊邊?。?。
最后想盡一切辦法讓它們重合（白色的top在上面，實(shí)心的bot在下面），最后通過(guò)調(diào)整絕對(duì)定位的參數(shù)（left，top）讓其重合的天衣無(wú)縫。好了，大功告成啦，不知道你get到了沒(méi)有？
總結(jié)
到此這篇關(guān)于css 實(shí)現(xiàn)小尖角聊天對(duì)話框帶尖角的說(shuō)話泡泡效果的文章就介紹到這了,更多相關(guān)css 尖角聊天對(duì)話框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3軟件卸載對(duì)話框代碼 根據(jù)是否卸載出現(xiàn)不同表情
這是一個(gè)對(duì)話框插件，它主要用來(lái)卸載軟件時(shí)的提示，特點(diǎn)在于，當(dāng)用戶選擇保留和卸載后，對(duì)話框中間的表情會(huì)根據(jù)用戶選擇發(fā)生動(dòng)態(tài)變化，非?？蓯?ài)。需要的朋友前來(lái)下載2019-07-29
對(duì)話框小尾巴，估計(jì)大家在實(shí)際開(kāi)發(fā)中應(yīng)該經(jīng)常遇到過(guò)，省事點(diǎn)的就是叫設(shè)計(jì)小姐姐給切個(gè)帶小尾巴的背景圖，那不省事的呢？這篇文章主要介紹了CSS對(duì)話框小尾巴,需要的朋友可以2019-05-16
純CSS實(shí)現(xiàn)氣泡對(duì)話框尖角處理方案
這篇文章主要介紹了純CSS實(shí)現(xiàn)氣泡對(duì)話框尖角處理的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-26用純css3和html制作泡沫對(duì)話框?qū)崿F(xiàn)代碼
泡沫對(duì)話框是一種比較流行的趨勢(shì)因?yàn)樗淖兞藗鹘y(tǒng)，通常情況下都是使用html和javascript或者是圖片來(lái)實(shí)現(xiàn)，接下來(lái)為大家介紹下使用css3配合html來(lái)實(shí)現(xiàn)一些簡(jiǎn)單的泡沫對(duì)話框2013-03-21純CSS代碼實(shí)現(xiàn)各類氣球泡泡對(duì)話框效果
利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內(nèi)容，沒(méi)有兼容性的問(wèn)題，我之前在純CSS實(shí)現(xiàn)各類氣球泡泡對(duì)話框效果一文中算是比較詳細(xì)的講述了CSS2010-12-27
