【css】纯CSS实现气泡框

所谓的气泡框就是一个矩形多出来一个小尖尖嘛。

先贴实现代码：
HTML：

<div class="test">
     <div class="bubble">
        <span></span><em></em>
     </div>
    //气泡框内容
</div>

CSS：

.test{ 
    padding:10px;
    border: 2px solid #f5f5f5;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius:15px;   
    /* 这里以上是实现框框圆角化 */ 
    width:150px; 
    height:150px; 
    position:relative; 
    background-color:#f5f5f5;
}
.bubble{ 
    position:absolute; 
    width:40px; 
    height:40px; 
    bottom:-40px; 
    left:102px; 
}
.bubble *{
    display:block; 
    border-width:20px; 
    position:absolute; 
    border-style:solid dashed dashed dashed; 
    font-size:0; line-height:0; 
}
.bubble em{
    border-color: transparent transparent #f5f5f5; 
    top:-185px;
}
.bubble span{
    border-color: transparent transparent #f5f5f5; 
    top:-185px;
}

我这个是尖尖向上的，如果想换成向左或向右又或向下，只需调.bubble em和.bubble span中的border-color那三个参数的位置即可