外观
用 CSS 画三角形的原理是什么？
把元素的宽高设为 0，只留边框。相邻边框在交界处是斜切的，让三条边透明、一条边有颜色，斜边就合成一个三角形。
原理
css
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 10px 8px;
border-color: transparent transparent #333 transparent;
}左右边框透明，下边框有颜色，得到朝上的三角形。底边越宽，三角形越钝。这是边框接合方式决定的，不是画了一块背景。
图标和可缩放的三角形更适合用 SVG，或者用两个边的 clip-path: polygon(...)。边框三角形放大后边缘清楚，但不好跟着字号和颜色系统走，也不好做描边以外的填充渐变。
箭头按钮还可以用空元素加两条边，再 rotate。那是折线箭头，不是实心三角。
追问
为什么宽高必须是 0？
宽高是内容盒。内容盒有面积时，你看到的是矩形加四边，中间不是尖的。宽高为 0 时，四条边在中心相接，斜切才露出来。
和 clip-path 比呢？
clip-path 裁的是元素本身，背景、渐变都能留在三角形里，尺寸也好写成 em。边框法不依赖较新的裁切，但语义上是用边框拼形状。
易错点
- 元素是
inline时，宽高不生效，要改成inline-block或块级。 - 三条边都没设透明，得到的是一个由四块斜切组成的矩形，不是三角。
- 用边框三角形当图标，颜色和点击区域要单独给，边框本身不好点。