border法比clip-path更可靠，因为它是CSS原生支持、零JS、兼容性最好、语义最轻量的方案，而clip-path在Safari旧版本中存在兼容问题。
为什么用 border 实现三角形比 clip-path 更可靠？
因为 border 绘制三角形是 CSS 原生支持、零 JS、无兼容性风险的方案，而 clip-path 在 Safari 旧版本（border 就是最稳的选择。
怎么用 border-width 和 transparent 控制三角形方向？
核心原理：当一个块元素只有单边有颜色边框、其余三边为 transparent，且宽高为 0 时，浏览器会把四条边交点处的渲染区域“挤”成一个三角形。方向由哪条边设为有色决定：
-
border-bottom: 10px solid #333→ 向下指的三角形 -
border-right: 10px solid #333→ 向右指的三角形 -
border-top: 10px solid #333→ 向上指的三角形 -
border-left: 10px solid #333→ 向左指的三角形
注意：必须同时设置 width: 0、height: 0，否则边框会撑开容器，变成梯形而非纯三角形。
Sass 里怎么封装成可复用的 mixin？
直接写重复的 border 声明容易出错，尤其要控制不同方向下的透明边框组合。用 Sass mixin 可以把方向、尺寸、颜色抽出来：
立即学习“前端免费学习笔记（深入）”；
@mixin triangle($direction, $size, $color) {
width: 0;
height: 0;
@if $direction == up {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
} @else if $direction == down {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
} @else if $direction == left {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $size solid $color;
} @else if $direction == right {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
}
}
调用时：@include triangle(up, 6px, #007bff)。注意：$size 是单边长度，最终三角形底边宽 ≈ $size × 2，高 = $size。
常见踩坑：为什么三角形边缘模糊或偏移？
本质是像素对齐问题，尤其在缩放或 subpixel 渲染场景下：
- 父容器用了
transform: scale()或zoom→ 三角形边框可能被插值模糊，建议改用font-size缩放配合em单位的$size - 三角形放在 inline 元素里（如
<span>）→ 默认 baseline 对齐，视觉上会下沉，加vertical-align: top或middle - 使用了
box-sizing: border-box但没重置padding/margin→ 边框宽度参与盒模型计算，导致尺寸意外变化，建议统一用box-sizing: content-box处理这类装饰性元素
真正难的不是画出来，而是让三角形在各种缩放、字体设置、嵌套层级下都稳稳地“钉”在该在的位置——这需要你主动控制它的 display、vertical-align、box-sizing，而不是依赖默认值。
