简析如何利用border属性制作三角形

以下观点只是个人所总结的，无权威性！大家一起交流学习！

当一个div的长宽均被设为0时，这时div实际上是缩成了一个小点，我姑且将它称为原点。此时，它的border如下图：

在给其border设置相关属性之后可以看到，div的各个方向border的区域是呈三角形的！

  .tri {
            width: 0;
            height: 0;
            border-left: 200px solid cadetblue;
            border-right: 100px solid chartreuse;
            border-top: 150px solid #3B6273;
            border-bottom: 50px solid #ff0000;
        }

所以要想制作一个三角形的话，只需将其他三个方向的border的颜色设置为透明即可！

 .tri {
            width: 0;
            height: 0;
            border-left: 200px solid cadetblue;
            border-right: 100px solid transparent;
            border-top: 150px solid transparent;
            border-bottom: 50px solid transparent;
        }

如下：