网页素材:显示三角图标的方式有很多,譬如:图片、符号△▲;用纯css的方式,怎么显示三角呢? 三角要怎么用才能美观呢?本站之前的一篇纯css的标签背景就是一个很好的应用方式。
那么本文主要介绍这种纯css显示三角的原理。
先看一下一个简单例子的效果:
HTML代码:
CSS代码:
span{border: 10px solid transparent; border-bottom: 11px solid #000; border-top: none;}
这里就是用纯border显示的向上的三角,我们可以看到,先透明border,然后一个底边,去掉顶部的border。 那么向右的箭头怎么写呢? border: 10px solid transparent; border-left: 11px solid #000; border-right: none;display:block;
注意此处display:block;同理,向左的箭头和向下的箭头,你应该也知道了吧。
然后看一下三角的应用效果:
HTML代码:
Issue15
CSS代码:
.issue {
position: absolute;
top: 0;
right: 90px;
width: 48px;
height: 58px;
font-family: Georgia;
background: #649F0C;
text-align: center;
font-size: 15px;
line-height: 1.2;
padding-top:6px;
}
.issue:after {
content: '';
display: block;/*这个也很关键的*/
position: absolute;
width: 0px;
height: 0px;
bottom: 0;
left: 0;
border: 24px solid transparent;
border-bottom: 11px solid #fff; /*此颜色根据页面背景色一直。不能为透明色transparent*/
border-top: none;
z-index: 1;
}
.issue em {
display: block;
font-style: normal;
font-size: 18px;
}
需要注意的关键代码是::after
content: '';
border: 24px solid transparent;
border-bottom: 11px solid #fff;
/*此颜色根据页面背景色一直。不能为透明色transparent*/ border-top: none;
CSS语法(伪对象选择符)
E:after/E::after{ sRules }
说明:设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用。CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。 即E:after可转化为E::after
更多例子:比如向上三角,向右三角在线调试http://jsfiddle.net/camnpr/G6KzB/3/
怎么在框的外边显示三角效果:(先看效果图)
HTML代码:
contentcontent
CSS代码:
/*-------------------------------------*/
/* 顶部三角的样式*/
/*-------------------------------------*/
.arrow_box {
background: #FEFEFE;
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FEFEFE,endColorStr=#F0F0F0);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FEFEFE,endColorStr=#F0F0F0)";
background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#F0F0F0));
background: -moz-linear-gradient(center top , #FEFEFE 0%, #F0F0F0 100%) repeat scroll 0 0 transparent;
border: 4px solid #EDEDED;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 0 1px #F8F8F8;
-moz-box-shadow: 0 0 0 1px #F8F8F8;
box-shadow: 0 0 0 1px #F8F8F8;
padding: 10px;
margin: 20px 0px;
}
.arrow_box:after, .arrow_box:before {
border: medium solid transparent;
bottom: 100%;
content: " ";
height: 0;
pointer-events: none;
position: absolute;
width: 0;
}
.arrow_box:after {
border-bottom-color: #F4F4F4;
border-width: 10px;
left: 28px;
margin-left: -10px;
}
.arrow_box:before {
border-bottom-color: #EEEEEE;
border-width: 18px;
left: 28px;
margin-left: -18px;
}
/*-------------------------------------*/
/* 左侧三角的样式*/
/*-------------------------------------*/
.left_arrow_box {
background: none repeat scroll 0 0 #FFF;
border: 6px solid rgba(190,190,190,0.3);
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
}
.left_arrow_box:after, .left_arrow_box:before {
right: 100%;
border: medium solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.left_arrow_box:after {
border-right-color: #F4F4F4;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.left_arrow_box:before {
border-right-color: #E3E3E3;
border-width: 18px;
top: 50%;
margin-top: -18px;
}
这种效果的原理是和上边的差不多,只是,使用了定位。同时让两个三角叠加,达到的一种效果。 你也可以通过在线调试来加深理解:在线演示效果
相关阅读: