氣泡效果邊框三角形的寫法

在實際開發中常常會有這樣的場景：類似聊天或者提示這樣的場景，此時文字框並非是一個完全矩形的框，而是在矩形框的某一側還有一個小三角的突起。我們知道CSS盒模型都是矩形的，那我們怎麼做出來這樣的效果呢？

先用CSS寫一個三角出來

<div class="tag">
    <em></em>
    CSS氣泡框實現
</div>
<style>
    .tag{
        width:300px;
        height:100px;
        border:5px solid #09F;
        position:relative;
    }
    .tag em{
        display:block;
        border-width:20px;
        border-style: solid;
        position:absolute;
        bottom:-40px;
        left:100px;
        border-color:#09F transparent transparent;
    }
</style>

此時矩形框的正下方緊挨邊框會有一個三角形出現，但這並不是我們要的效果，這個三角形是實心的。

再用CSS寫一個三角出來，並讓它蓋掉一部分上邊的三角

<div class="tag">
    <em></em>     
    <span></span>
    CSS氣泡框實現
</div>
<style>
    .tag{
        width:300px;
        height:100px;
        border:5px solid #09F;
        position:relative;
    }
    .tag em{
        display:block;
        border-width:20px;
        border-style:solid;
        position:absolute;
        bottom:-40px;
        left:100px;
        border-color:#09F transparent transparent;
    }    
    .tag span {
        display: block;
        border-width: 20px;
        border-style: solid;
        position: absolute;
        bottom: -33px;
        left: 100px;
        border-color:#FFF transparent transparent;
    }    
</style>

這樣我們就實現了一個氣泡框。