使用 CSS 边框（Border）属性创建三角形

1. 原理

当一个元素的`width`和`height`都设为 0，并且将四个边框中的三个设置为透明（`transparent`），另一个边框设置为可见颜色时，就可以形成一个三角形。

2. 向下的三角形

css">.triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}

3. 向上的三角形

css">.triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid blue;}

4. 向左的三角形

css">.triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-right: 100px solid green;}

5. 向右的三角形

css">.triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 100px solid yellow;}