[分享]利用:after+border画纯css三角

分类：Html_Css| 发布：camnprbubuol| 查看：2462 | 发表时间：2013/7/22

网页素材：显示三角图标的方式有很多，譬如：图片、符号△▲；用纯css的方式，怎么显示三角呢？三角要怎么用才能美观呢？本站之前的一篇纯css的标签背景就是一个很好的应用方式。
那么本文主要介绍这种纯css显示三角的原理。

先看一下一个简单例子的效果：

HTML代码：

`1`	`<span> </span>`

CSS代码：

`1`	`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；同理，向左的箭头和向下的箭头，你应该也知道了吧。

然后看一下三角的应用效果：

css显示三角

HTML代码：

`1`	`<div` `class="issue">Issue<em>15</em></div>`

CSS代码：

01.issue {
02    position: absolute;
03    top: 0;
04    right: 90px;
05    width: 48px;
06    height: 58px;
07    font-family: Georgia;
08    background: #649F0C;
09    text-align: center;
10    font-size: 15px;
11    line-height: 1.2;
12    padding-top:6px;
13}
14.issue:after {
15    content: '';
16    display: block;/*这个也很关键的*/
17    position: absolute;
18    width: 0px;
19    height: 0px;
20    bottom: 0;
21    left: 0;
22    border: 24px solid transparent;
23    border-bottom: 11px solid #fff; /*此颜色根据页面背景色一直。不能为透明色transparent*/
24    border-top: none;
25    z-index: 1;
26    }
27.issue em {
28    display: block;
29    font-style: normal;
30    font-size: 18px;
31}

需要注意的关键代码是：:aftercontent: ''; 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代码：

`1`	`<div` `class="arrow_box">content</div>`

`2`	`<div` `class="left_arrow_box">content</div>`

CSS代码：

01    /*-------------------------------------*/
02/* 顶部三角的样式*/
03/*-------------------------------------*/
04.arrow_box {
05    background: #FEFEFE;
06    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FEFEFE,endColorStr=#F0F0F0);
07    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FEFEFE,endColorStr=#F0F0F0)";
08    background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#F0F0F0));
09    background: -moz-linear-gradient(center top , #FEFEFE 0%, #F0F0F0 100%) repeat scroll 0 0 transparent;
10    border: 4px solid #EDEDED;
11    position: relative;
12    -webkit-border-radius: 5px;
13    -moz-border-radius: 5px;
14    border-radius: 5px;
15    -webkit-box-shadow: 0 0 0 1px #F8F8F8;
16    -moz-box-shadow: 0 0 0 1px #F8F8F8;
17    box-shadow: 0 0 0 1px #F8F8F8;
18    padding: 10px;
19    margin: 20px 0px;
20}
21.arrow_box:after, .arrow_box:before {
22    border: medium solid transparent;
23    bottom: 100%;
24    content: " ";
25    height: 0;
26    pointer-events: none;
27    position: absolute;
28    width: 0;
29}
30.arrow_box:after {
31    border-bottom-color: #F4F4F4;
32    border-width: 10px;
33    left: 28px;
34    margin-left: -10px;
35}
36.arrow_box:before {
37    border-bottom-color: #EEEEEE;
38    border-width: 18px;
39    left: 28px;
40    margin-left: -18px;
41}
42  
43/*-------------------------------------*/
44/* 左侧三角的样式*/
45/*-------------------------------------*/
46.left_arrow_box {
47    background: none repeat scroll 0 0 #FFF;
48    border: 6px solid rgba(190,190,190,0.3);
49    position: relative;
50-webkit-border-radius: 5px;
51  -moz-border-radius: 5px;
52       border-radius: 5px;
53-webkit-box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
54   -moz-box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
55       box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 2px #F4F4F4 inset;
56  
57}
58.left_arrow_box:after, .left_arrow_box:before {
59   right: 100%;
60   border: medium solid transparent;
61   content: " ";
62   height: 0;
63   width: 0;
64   position: absolute;
65   pointer-events: none;
66}
67.left_arrow_box:after {
68   border-right-color: #F4F4F4;
69   border-width: 10px;
70   top: 50%;
71   margin-top: -10px;
72}
73.left_arrow_box:before {
74   border-right-color: #E3E3E3;
75   border-width: 18px;
76   top: 50%;
77   margin-top: -18px;
78}