实现气泡框

***************HTML*******************************

<div class="tag"> /*设置出矩形框*/
<em></em>
<span></span>
CSS气泡框实现

</div>

*********************css*******************
.tag{
width:300px;

height:100px;

border:5px solid #09F;

position:relative;
}
.tag em{
display:block; /*设置为块级元素方便移动*/

border-width:20px; /* 设置需要的三角形的大小*/

position:absolute; /* absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。*/

bottom: 100px; /*移动三角形的位置*/

left:30px;

border-style:solid;

border-color:transparent transparent #09F transparent; /*设置三个三角形隐藏，留下需要的那一个*/

/* border-color:#FFFFFF #FFFFFF #0099FF #FFFFFF;*/

font-size:0; line-height:0; /*兼容问题的解决*/
}

.tag span{
display:block; /*设置为块级元素方便移动*/

border-width:15px; /* 设置需要用来覆盖的三角形的大小*/

position:absolute; /* 同上*/

bottom:100px; /*移动三角形的位置*/

left:35px;

border-style:solid ;

border-color:transparent transparent #FFFFFF transparent; /*设置三个三角形隐藏，留下需要的那一个*/

font-size:0; line-height:0;

}