纯css三角形

三角形原理：
　　盒子c内容width为0，height为0，盒子给一定宽度的border，分别为四边的border设置不同的颜色，则可以得到不同样式的三角形
举个简单的栗子：
CSS代码

　　　　　.box1{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 200px 200px 0 0;
            border-color: #007bff transparent transparent transparent;
        }
        .box2{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 200px 0 0 200px;
            border-color: transparent transparent transparent #007bff;
        }

HTML代码

<div class="box1"></div>
<div class="box2"></div>

设置盒子的一边border颜色为#007bff，其他三边颜色透明，则可得到如下结果的三角形

box1结果如下图：

box2结果如下图：

如果想获取不同样式的三角形，只需要设置不同的border的颜色。