CSS绘制三角形

利用CSS绘制三角形  并应用在相应的场景中，减少图片的使用，可提高加载速率，降低HTTP请求次数

在同一方向上，大致有三种绘制方式，绘制出来的有两种规格（在保持宽度不变的情况下）

对比图：

假定给第一个三角形命名为 triangle1，则第二第三个分别为triangle2，triangle3

先从第三个最小面积的说起，代码如下：

height: 0;width: 0;border-bottom: 40px solid black;border-left: 40px solid transparent;

盒子宽高设置为0，用边框填充来绘制三角形，画个图来解释吧...

同理，可得三角形一二，代码如下：

triangle1：

height: 0;width: 0;border-bottom: 40px solid black;border-left: 40px solid transparent;border-right: 40px solid transparent;

triangle2：

height: 0;width: 0;border-bottom: 40px solid black;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;