纯CSS实现小三角提示信息_html/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; }

 hello，我出生了
 hello，我出生了 hello，我出生了
 hello，我出生了 hello，我出生了
 hello，我出生了 hello，我出生了
 hello，我出生了

 /*上三角*/ .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 ; }

 css3气泡框 css3气泡框 css3气泡框 css3气泡框

 .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 ; }

 css3气泡框