純CSS實(shí)現(xiàn)氣泡對(duì)話框尖角處理方案
發(fā)布時(shí)間：2017-06-26 16:02:06 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了純CSS實(shí)現(xiàn)氣泡對(duì)話框尖角處理的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
先來(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)有？
相關(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用純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)各類(lèi)氣球泡泡對(duì)話框效果
利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內(nèi)容，沒(méi)有兼容性的問(wèn)題，我之前在純CSS實(shí)現(xiàn)各類(lèi)氣球泡泡對(duì)話框效果一文中算是比較詳細(xì)的講述了CSS2010-12-27
css 實(shí)現(xiàn)小尖角聊天對(duì)話框帶尖角的說(shuō)話泡泡效果
這篇文章主要介紹了css 實(shí)現(xiàn)小尖角聊天對(duì)話框帶尖角的說(shuō)話泡泡效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下2020-04-10
