css 三角构建
使用 CSS 边框（Border）属性创建三角形
1. 原理
当一个元素的`width`和`height`都设为 0，并且将四个边框中的三个设置为透明（`transparent`），另一个边框设置为可见颜色时，就可以形成一个三角形。
2. 向下的三角形
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}3. 向上的三角形
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}4. 向左的三角形
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid green;
}5. 向右的三角形
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid yellow;
}