先來(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; } } } 大白話(huà)講解：
如果你想要其他方位的尖角，就調(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)有？
新聞熱點(diǎn)
疑難解答
圖片精選
