用css实现三角形原理以及做法

在前端开发中，css是我们常用的功能，下面是我通过css来实现三角形以及实现三角形的原理，希望能够帮助大家！

以下是我的思路

我的思路是通过css中的border来实现三角形的样式，因为border的边框原理上来说是由4个三角形组成

1. 首先我们创建一个带边框的div：宽高40px，边框40px实线，四边分别给不同的颜色

div {
            width: 40px;
            height: 40px;
            border: 40px solid;
            border-color: red pink green blue;
        }

2. 因为设置了宽高所以中间有一块白色，我们将宽高给去除，便可以很明显的看到4个三角形组成的盒子

 div {
            width: 0px;
            height: 0px;
            border: 40px solid;
            border-color: red pink green blue;
        }

3.接下来我们将其余三条的边框去除掉便可以获得一个三角形,利用transparent属性

 div {
            width: 0px;
            height: 0px;
            border: 40px solid;
            border-color: transparent transparent transparent blue;
        }

其实实现的方法有很多种，这是我喜欢用的一种方法，分享给大家，谢谢观看！