用纯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 的浏览器。
