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

网页素材：显示三角图标的方式有很多，譬如：图片、符号△▲；用纯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;
}

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

content

content

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

这种效果的原理是和上边的差不多，只是，使用了定位。同时让两个三角叠加，达到的一种效果。 你也可以通过在线调试来加深理解：在线演示效果

相关阅读：

纯css的标签背景