实现后的效果如下：
不带边框的
带边框的
立即学习“前端免费学习笔记（深入）”；
在此提供两种实现方式：
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; }<div class="entry"> <div class="entry-trangle-left"><!--本Div只来实现三角形，无其他作用--></div> hello，我出生了<br/> hello，我出生了</div><div class="entry"> <div class="entry-trangle-right"><!--本Div只来实现三角形，无其他作用--></div> hello，我出生了<br/> hello，我出生了</div><div class="entry"> <div class="entry-trangle-top"><!--本Div只来实现三角形，无其他作用--></div> hello，我出生了<br/> hello，我出生了</div><div class="entry"> <div class="entry-trangle-bottom"><!--本Div只来实现三角形，无其他作用--></div> hello，我出生了<br/> hello，我出生了</div>
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 ; }<div class="tag-top"> css3气泡框</div><div class="tag-bottom"> css3气泡框</div><div class="tag-left"> css3气泡框</div><div class="tag-right"> css3气泡框</div>
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 ; }<div class="tag-right-noborder"> css3气泡框</div>
如有疑问，可联系：
QQ：1004740957
Email：niujp08@qq.com
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
541
收藏
