用边框写三角形

今天介绍一种用纯css书写三角形的方法，就是用边框写css，平时我们写的代码大概是这样的，

 div {
            width: 200px;
            height: 200px;
            background-color: blue;
            border: 5px solid pink;
        }

效果图如下 

但是我们设想一下，如果宽和高都为0，但是边框非常大那会是什么效果那，接下来我们把四个边框分别设为不同的颜色，看一下效果。

 div {
            width:0px;
            height: 0px;
           
            border: 100px solid ;
            border-top-color: pink;
            border-right-color: rgb(190, 17, 46);
            border-left-color: rgb(37, 158, 78);
            border-bottom-color: rgb(52, 74, 148);

        }

                       效果如下

所以，当我们把其余三边都设为透明，就可以看出来一个三角形

 

如果我们想要更改一些，三角形的形状或者高度等等，可以通过更改各个边的宽度，即更改比例来改变三角形的形状。