气泡效果边框三角形的写法

在实际开发中常常会有这样的场景：类似聊天或者提示这样的场景，此时文字框并非是一个完全矩形的框，而是在矩形框的某一侧还有一个小三角的突起。我们知道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>

这样我们就实现了一个气泡框。