前言
还在用图片制作箭头，三角形，那就太lou了。css可以轻松搞定这一切，而且颜色大小想怎么变就怎么变，还不用担心失真等问题。
先来看看这段代码:
/**css*/
.d1{
width: 0;
height: 0;
border: 100px solid #339933;
}
/**html*/
/**css*/
.d2{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:#FFCCCC #0099CC #996699 #339933;
}
/**html*/
CSS绘制三角形和箭头，不用再用图片了
看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只需要用元素的`border`来控制就可以了，`border-with`控制大小， `border-style`控制样式(实线、虚线等)， `border-color`控制颜色，分上、右、下、左
三角形示例
向下三角形
/**css*/
.d3{
margin-left: 10px;
float: left;
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:#FFCCCC transparent transparent transparent;
}
/**html*/
CSS绘制三角形和箭头，不用再用图片了
向左三角形
/**css*/
.d4{
margin-left: 110px;
float: left;
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
}
/**html*/
CSS绘制三角形和箭头，不用再用图片了
这里的`transparent`是透明的意思
接下来两种就留给聪明的你了，相信你可以的，动手才知道原来这么简单！
其实我们还可以通过，一种样式，来实现不能角度的三角形，那就是利用CSS3里面的旋转`transform:rotate(90deg)`。
/**css*/
.d4{
margin-left: 110px;
float: left;
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
/**html*/
CSS绘制三角形和箭头，不用再用图片了
箭头示例
向左箭头
/**css*/
.left{
position: absolute;
}
.left:before,.left:after{
position: absolute;
content: '';
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-bottom: 10px transparent dashed;
border-right: 10px #fff solid;
}
.left:before{
border-right: 10px #0099CC solid;
}
.left:after{
left: 1px; /*覆盖并错开1px*/
border-right: 10px #fff solid;
}
/**html*/
