纯CSS实现小三角提示信息
浏览数：29 /
时间：2015年06月09日
实现后的效果如下：
不带边框的
带边框的
在此提供两种实现方式：
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：
<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>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：
<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 ;
}html：
<div class="tag-right-noborder">
css3气泡框
</div>实现后的效果：
如有疑问，可联系：
QQ：1004740957
Email：[email protected]
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
