用纯CSS实现三角图标

在前端开发中，经常遇到这样的三角图标。

虽然美术设计人员可能已经帮你切好了图片，用CSS的绝对定位往上一摆即可。但这是最原始的方法，主框一旦改动，三角图标也得跟着改动。

现在来看如何用纯CSS实现三角图标，它的优点非常明显，不用修改图片，而且减少了网络请求。我找到 2 种方法来制作这样的三角图标。

1.边框法

对一个宽高均为 0 的容器，设置一定宽度的边框。其中一条边的颜色为三角图标所需的颜色，其余边框颜色设为透明。这个容器看起来就分成了 4 份，每一份成为一个三角形，这就是它的四条边。为了减少容器的大小，所需三角形的对边可设置为 0。代码如下：

.triangle {
    display: block;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;  /* 设定横向边框的宽度小于竖向边框，可以形成长三角形 */
    border-style: solid;
    border-color: transparent transparent red;
}

发挥你的想象，还可以组合成其它效果的箭头。例如气泡效果的长斜箭头，可以使用容器的上右部分2个三角来组合，并且将容器设置成竖向的长方形。

2.旋转法

这种方法需要两个容器，外层容器限定范围，内层容器用于制作三角图形。将内层容器的背景色设置为所需三角形的颜色，再将其旋转45度，然后将其偏移（如向下偏移则形成上三角），并且设置外层容器溢出的截断。

<span class="arrow"><span></span></span>

span.arrow {
    display: block; 
    width: 15px;  /* 宽高设置为内层容器对角线的长度，或者略大一点 */
    height: 15px; 
    overflow: hidden;
}
span.arrow span {
    position: relative;
    top: 10px; 
    display: block; 
    width: 8px; 
    height: 8px; 
    margin: 0 auto; 
    border: 1px solid #cdd2d9; 
    background-color: #f7f7f7; 
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);  /* IE 9 */
    -webkit-transform: rotate(45deg);  /* Safari and Chrome */
    -moz-transform: rotate(45deg);  /* Firefox */
    -o-transform: rotate(45deg);  /* Opera */
}

旋转法的优点是，可以制作带连线的三角，并且可以增加阴影、渐变等效果。但这是 CSS3 的特性，必须使用支持 CSS3 的浏览器。