純CSS實現氣泡對話方塊尖角效果的執行個體代碼

這篇文章主要介紹了純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到了沒有？