纯CSS绘制三角形

       <div class="div1"></div>
       
       
       .div1 {
            width: 0;
            height: 0;
            border: 150px solid;
            border-left-color: rebeccapurple;
            border-right-color: pink;
            border-top-color: rgb(172, 34, 68);
            border-bottom-color: rgb(50, 192, 164);
            margin: 130px 0px;
            display: inline-block;
        }

首先给一个元素设置border为150px solid，分别设置上下左右border的颜色，就可以得到下图：

这个正方形由四个三角形组成，如果我们把其中的三个三角形隐藏起来，那就只是一个三角形而已了，这样就可以达到我们的目的了
方法：将其中的三个三角形的颜色设置为transparent（透明）

       <div class="div1"></div>
       

        .div1 {
            width: 0;
            height: 0;
            border: 150px solid;
            border-left-color: transparent;
            border-right-color: pink;
            border-top-color: transparent;
            border-bottom-color: transparent;
            margin: 130px 0px;
            display: inline-block;
        }

效果如下：