纯CSS气泡框实现方法探究

 

<style><!--
.tag{
       width: 200px;
    height: 100px;
    border: 2px solid #CCC;
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    text-align: center;
    line-height:100px
}
.tag:before,.tag:after{
        content: "";
    display: block;
    border-width: 20px;
    position: absolute;
    bottom: -40px;
    left: 12px;
    border-style: solid dashed dashed;
    border-color: #CCC transparent transparent;
    font-size: 0;
    line-height: 0;
}
.tag:after{
    bottom: -37px;
    border-color: #FFF transparent transparent
}
--></style>
<div class="tag">CSS QQ气泡框</div>

<style><!--
.tag{
       width: 200px;
    height: 100px;
    border: 2px solid #CCC;
    position: relative;
    background-color: #FFF;
    border-radius: 10px;
    text-align: center;
    line-height:100px
}
.tag:before,.tag:after{
        content: "";
    display: block;
    border-width: 20px;
    position: absolute;
    bottom: -40px;
    left: 12px;
    border-style: solid dashed dashed;
    border-color: #CCC transparent transparent;
    font-size: 0;
    line-height: 0;
}
.tag:after{
    bottom: -37px;
    border-color: #FFF transparent transparent
}
--></style>
<div class="tag">CSS QQ气泡框</div>