先來看一下效果圖：

簡單粗暴上程式碼：

html：

                    <div class="dialog-box">
                      <span class="bot"></span>
                      <span class="top"></span>
                    </div>

      .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到了沒有？