1. 首先，我们先来看看下面这段代码的效果，设置div块的宽、高，以及四周的boder，其中，四个border颜色不同，得到的结果如下图所示：
<style>
.triangle {
width: 100px;
height: 100px;
border-left: 100px solid green;
border-right: 100px solid blue;
border-bottom: 100px solid red;
border-top: 100px solid yellow;
}
</style>
<body>
<div class="triangle"></div>
</body>
2. 接下来，我们把div块的宽高设为0，再看下效果：
.triangle {
width: 0px;
height: 0px;
border-left: 100px solid green;
border-right: 100px solid blue;
border-bottom: 100px solid red;
border-top: 100px solid yellow;
}
看到没！！就是border重叠的部分，它从对角线处一分为二，颜色各一半，举个例子，如下图所示，黑色部分为俩border重叠的区域，那这个区域的颜色怎么分配的呢？就是从对角线处一分为二，一部分设置为粉色（left 边框的颜色），一部分设置为绿色（top边框的颜色）。
3. 我们再来看一下不同数量的边框组合组成的效果：
- 仅设置 left-border、right-border、bottom-border
- 设置 left、right、top
- 设置 top、bottom、left
- 设置 top、bottom、right
看到没有！！！我们想要的各个三角形就出来了！！！
4. 怎么得到三角形呢？根据自己的需求，把不同的方向的 border 设置为 transparent（透明）。举例如下：
- 等腰三角形
.triangle {
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid red;
}
- 想要高一点的等腰三角形怎么办嘞，那就把左右边框设置的细一点，各为一半。
.triangle {
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid red;
}
- 想要倒三角形怎么办呢？那就保留top-border，不要bottom-border
- 至于等边三角形，则需要自己去计算，比如边长度为 200， 那么 left-border、right-border 宽度都设置为100，bottom-border 宽度设置为 100 * 根号3 （大家可以画一下）
.triangle {
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173.2px solid red;
}
大家可以自己去试试，我就不再继续举例啦~