三角形的实现

设置css：
height：0；
width：0；
然后设置边框样式。最关键的也在这里。
如果css是这样：
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000
样式就是这样。

所以，如果你要一个向上或者向下的三角。。。那么border-left和border-right就是transparent，而border-bottom可见则三角向上，border-top可见则三角向下

如果你要一个向左或者向右的三角。。。那么border-top和border-bottom就是transparent，而设置border-left则三角向右，设置border-right则三角向左

当然，还有这样的三角

很容易理解
这是左上三角，
所以它的上是有的，但是右是透明的
border-top: 100px solid red;
border-right: 100px solid transparent;

同理可知

右上的三角，上是有的，左是没有的
border-top: 100px solid red;
border-left: 100px solid transparent;

除此之外，还有这样的三角

而这样的三角主要是设置的border比例不同
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
很明显的左三角和下三角的比例是2:1，在下三角可以明显的看出来，下三角的底边，左右2:1；
同理，根据上面的上下左右布局，应该没有什么三角是画不出来的