在设计稿中，经常会出现好多三角形，如果将三角形变成图片，通过img标签的src或者background中的url来访问，从前端性能方面来看这并不好。那问题来了，如何用css来画三角形呢？别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。
先来说说实心的三角形。
画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。但是在写div时，会发现，div是的边框是直线。那么，我想到，要是给div的高和宽设置为0，然后设置四个border不同的颜色，那么这个颜色会重叠覆盖么？ps：当然会想到设置padding或者margin值，但是这两种属性无法设置颜色。
#triangle02{ width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid yellow; } 
因为我们只想要一个三角形，如果把其他三个三角形的颜色变白，那就只剩下一个，等等，如果背景颜色不是白色呢？css中有这样一个属性，transparent，背景透明。这样便可以达到我们的目的了。
#triangle03{ width: 0; height: 0; border: 50px solid transparent; border-top: 50px solid blue; }#triangle04{ width: 0; height: 0; border: 50px solid transparent; border-right: 50px solid red; }#triangle05{ width: 0; height: 0; border: 50px solid transparent; border-bottom: 50px solid green; }#triangle06{ width: 0; height: 0; border: 50px solid transparent; border-left: 50px solid yellow; } 上面的代码就可以实现，四个不同方向的三角形了。
设计稿中可能还会出现高和底长度有限制的三角形，这里以第三个绿色三角形为例。看上面的代码，我们可以发现，三角形的底为border的两倍，border-bottom为三角形的高。来看下面这组三角形：
#my01{ width: 0; height: 0; border: 50px solid transparent; border-bottom: 50px solid green; }#my02{ width: 0; height: 0; border: 50px solid transparent; border-bottom: 80px solid green; }#my03{ width: 0; height: 0; border: 50px solid transparent; border-bottom: 100px solid green; }#my04{ width: 0; height: 0; border: 50px solid transparent; border-bottom: 150px solid green; } 
#my11{ width: 0; height: 0; border: 50px solid transparent; border-bottom: 100px solid green; }#my12{ width: 0; height: 0; border: 70px solid transparent; border-bottom: 100px solid green; }#my13{ width: 0; height: 0; border: 90px solid transparent; border-bottom: 100px solid green; }#my14{ width: 0; height: 0; border: 110px solid transparent; border-bottom: 100px solid green; } 
够详细吧~
那个小箭头的三角形，主要运用了css3的transform中的rotate()，我们后续再介绍吧！