实现后的效果如下：
不带边框的
带边框的
在此提供两种实现方式：
1、不带边框的
css：
*{margin:0;padding:0;} body{ background:#666; font:14px/20px microsoft yahei; text-align: left; } .entry{ position: relative; margin-left: 20px; margin-top:20px; width:200px; background:#fff; padding:10px; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } /*左三角*/ .entry-trangle-left{ position:absolute; bottom:15px; left:-10px; width:0; height:0; border-top:15px solid transparent; border-bottom:15px solid transparent; border-right:15px solid #fff; } /*右三角*/ .entry-trangle-right{ position:absolute; top:15px; right:-10px; width:0; height:0; border-top:15px solid transparent; border-bottom:15px solid transparent; border-left:15px solid #fff; } /*上三角*/ .entry-trangle-top{ position:absolute; top:-10px; left:20px; width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #fff; } /*下三角*/ .entry-trangle-bottom{ position:absolute; bottom:-10px; left:20px; width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:15px solid #fff; }
html：
hello，我出生了
hello，我出生了
hello，我出生了
hello，我出生了
hello，我出生了
hello，我出生了
hello，我出生了
hello，我出生了

2、带边框的
css：
/*上三角*/ .tag-top{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#fff; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-top:before,.tag-top:after{ content:; display:block; border-width:15px; position:absolute; top:-30px; left:100px; border-style:solid dashed dashed solid; border-color:transparent transparent #f99 transparent; font-size:0; line-height:0; } .tag-top:after{ top:-27px; border-color: transparent transparent #fff transparent; } /*下三角*/ .tag-bottom{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#fff; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-bottom:before,.tag-bottom:after{ content:; display:block; border-width:15px; position:absolute; bottom:-30px; left:100px; border-style:solid dashed dashed solid; border-color:#f99 transparent transparent transparent; font-size:0; line-height:0; } .tag-bottom:after{ bottom:-27px; border-color: #fff transparent transparent transparent; } /*左三角*/ .tag-left{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#fff; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-left:before,.tag-left:after{ content:; display:block; border-width:15px; position:absolute; left:-30px; top:20px; border-style:dashed solid solid dashed; border-color:transparent #f99 transparent transparent; font-size:0; line-height:0; } .tag-left:after{ left:-27px; border-color:transparent #fff transparent transparent ; } .tag-right{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #f99; position:relative; background-color:#fff; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-right:before,.tag-right:after{ content:; display:block; border-width:15px; position:absolute; right:-30px; top:20px; border-style:dashed solid solid dashed; border-color:transparent transparent transparent #f99; font-size:0; line-height:0; } .tag-right:after{ right:-27px; border-color:transparent transparent transparent #fff ; }
html：
css3气泡框
css3气泡框
css3气泡框
css3气泡框

此外，如若，设置边框的颜色与背景色相同，也能得到没有边框的：
css：
.tag-right-noborder{ margin: 20px; padding: 5px; width:300px; height:60px; border:2px solid #fff; position:relative; background-color:#fff; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .tag-right-noborder:before,.tag-right-noborder:after{ content:; display:block; border-width:15px; position:absolute; right:-30px; top:20px; border-style:dashed solid solid dashed; border-color:transparent transparent transparent #fff; font-size:0; line-height:0; } .tag-right-noborder:after{ right:-27px; border-color:transparent transparent transparent #fff ; }
html：
css3气泡框

实现后的效果：
如有疑问，可联系：
qq：1004740957
email：niujp08@qq.com