css实现气泡对话框

网上也有很多的案例，这里也只是以自己的方法实现。
原理，还是比较简单的。
只是半透明的那个案例，遇到了些问题，最终还是选择避开问题的方法解决了。

1  .bubble_diailog{position: relative;background: #ffc;border:1px solid #ccc;border-radius: 3px;margin:20px 0 0 20px;}
 2  .bubble_diailog i,.bubble_diailog b{position: absolute;width: 0;height: 0;overflow: hidden;border-width:5px;display:block;}
 3 /*上*/
 4  .bubble_diailog i.t,.bubble_diailog b.t{border-style: dashed dashed solid dashed;}
 5  .bubble_diailog i.t{top:-10px;left:30px;border-color:transparent transparent #ccc transparent;}
 6  .bubble_diailog b.t{top:-9px;left:30px;border-color:transparent transparent #ffc transparent;}
 7 /*下*/
 8  .bubble_diailog i.b,.bubble_diailog b.b{border-style:solid dashed dashed dashed;}
 9  .bubble_diailog i.b{bottom:-10px;left:30px;border-color:#ccc transparent transparent transparent;}
10  .bubble_diailog b.b{bottom:-9px;left:30px;border-color:#ffc transparent transparent transparent;}
11 /*左*/
12  .bubble_diailog i.l,.bubble_diailog b.l{border-style:dashed solid dashed dashed;}
13  .bubble_diailog i.l{top:29px;left:-10px;border-color:transparent #ccc transparent transparent;}
14  .bubble_diailog b.l{top:29px;left:-9px;border-color:transparent #ffc transparent transparent;}
15 /*右*/
16  .bubble_diailog i.r,.bubble_diailog b.r{border-style:dashed dashed dashed solid;}
17  .bubble_diailog i.r{top:29px;right:-10px;border-color:transparent transparent transparent #ccc;}
18  .bubble_diailog b.r{top:29px;right:-9px;border-color:transparent transparent transparent #ffc;}
19
20
21  .size_1{width: 200px;height: 80px;}
22
23 /**
24  * IE ARGB背景半透明滤镜溢出隐藏bug
25  * http://himeters.com/ie-argb-overflowhidden-bug 26 */
27  .bubble_opacity{border-radius: 3px;margin:-40px 0 0 20px;font-size:14px;
28  background-color:rgba(0,0,0,.8);position:relative;
29 }
30  .bubble_opacity,.bubble_opacity .in{width:200px;height:80px;}
31  .bubble_opacity .in{filter: progid:dximagetransform.microsoft.gradient(startcolorstr="#CC000000", endcolorstr="#CC000000");}
32  .bubble_opacity i{overflow:hidden;display:block;height:0;width:0;border-style:dashed dashed solid dashed;border-color:transparent transparent #000 transparent;position:absolute;top:-10px;left:30px;border-width:5px;opacity: .8;filter:alpha(opacity=80);}
33  .bubble_opacity p{padding:20px 0 0 20px;color:#fff;}

<!-- 上 -->
<div class="bubble_diailog size_1">
<i class="t"></i>
<b class="t"></b>
</div>
<!-- 下 -->
<div class="bubble_diailog size_1">
<i class="b"></i>
<b class="b"></b>
</div>
<!-- 左 -->
<div class="bubble_diailog size_1">
<i class="l"></i>
<b class="l"></b>
</div>
<!-- 右 -->
<div class="bubble_diailog size_1">
<i class="r"></i>
<b class="r"></b>
</div>
<!-- 半透明 -->
<div class="bubble_opacity">
<i></i>
<div class="in">
<p>亲，我是半透明的哦！~</p>
</div>
</div>

亲，我是半透明的哦！~