CSS 如何画一个三角形？

Question

CSS 如何画一个三角形？

仓乃文 · Accepted Answer

利用 border 的特性：当元素宽高为 0 时，四条 border 拼接处会形成 45 度角，将三条边设为透明即可得到三角形。

朝上的三角：
```css
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;     /* 底边实色 */
}
```

朝下的三角：
```css
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue;
}
```

朝左的三角：
```css
.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid green;
}
```

补充说明：
- 原理：border 是梯形拼接的，宽高为 0 时梯形变成直角三角形
- 透明边用 transparent，不是 background: transparent
- 三角大小由 border 宽度控制
- clip-path 方案更灵活但兼容性稍差