這篇文章主要介紹了純CSS實現氣泡對話框尖角處理的實現代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
先來看一下效果圖:
簡單粗暴上程式碼:
html:
<p class="dialog-box"> <span class="bot"></span> <span class="top"></span> </p>
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; } } }
大白話講解:
如果你想要其他方位的尖角,就調整boder-color的順序(上,右,下,左)。
主要的原理大概是有兩個一樣形狀,比例不同的小三角,一個和底色一樣的實心三角bot,一個白色底的top,並且top是會蓋在bot上面的,然後調整它們的大小(一般來說實心要比白色塊大一點,這樣才可以顯示出有眼色的邊邊啊)。
最後想盡辦法讓它們重合(白色的top在上面,實心的bot在下面),最後透過調整絕對定位的參數(left,top)讓其重合的天衣無縫。好了,大功告成啦,不知道你get到了沒有?
以上是純CSS實現氣泡對話框尖角效果的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!