CSS用border画三角形尺寸不准，因底边=2×border-width、高=border-width，等腰三角形需按$base/2和$height设左右/下边框；非等腰需math.tan()转弧度计算并round取整，伪元素更语义化且避免DOM膨胀。
用 border 技巧画三角形时，为什么尺寸总是不准？
因为纯 CSS 的三角形本质是利用元素边框交汇处的斜角形成的视觉效果，border-width 直接决定三角形底边和高度，但底边长度 = 2 × border-width，而高 = border-width（等腰直角三角形）或需按比例推算（锐角/钝角）。一旦需要精确控制底边为 12px、高为 8px 的等腰三角形，手动凑 border 值极易出错。
- 等腰直角三角形：设
border-bottom: 8px，则底边自动为16px，无法单独指定底边 - 非等腰三角形（如箭头）：需同时调
border-left、border-right、border-bottom，三者耦合，改一个就得重算另两个 - 响应式场景下用
em或rem更难对齐，因为边框不继承 font-size 缩放逻辑
SCSS 混合宏如何解耦“想要的尺寸”和“实际 border 值”？
核心是把设计师给的「目标底宽」$base 和「目标高度」$height 当作输入，由混合宏内部用三角函数反推所需 border 值。例如画一个朝下的等腰三角形，本质是让左右 border 形成夹角，其夹角正切值 = $height / ($base / 2)，再换算成对应方向的 border 宽度。
@mixin triangle-down($base, $height, $color: currentColor) {
width: 0;
height: 0;
border-left: ($base / 2) solid transparent;
border-right: ($base / 2) solid transparent;
border-bottom: $height solid $color;
}这个写法只适用于等腰三角形；若需任意顶角（比如 30° 锐角箭头），就得引入 tan() 计算——但注意：SCSS 原生不支持三角函数，必须借助 math.tan()（Dart Sass 1.33+）或自定义函数。
使用 math.tan() 生成非等腰三角形时要注意什么？
Dart Sass 的 math.tan() 接收弧度值，不是角度。常见错误是直接传 30，结果画出完全不对的形状。
立即学习“前端免费学习笔记（深入）”；
- 角度转弧度公式：
$rad: $deg * math.pi() / 180 - 朝右的锐角三角形：左 border 高度 =
$height，下 border 宽度 =$height / math.tan($rad) - 务必用
math.round()包裹计算结果，避免小数像素导致 subpixel 渲染模糊 - IE 不支持
math.*函数，若需兼容，得降级为固定比例查表或 JS 补充
@use "sass:math";
@mixin triangle-right($height, $angle-deg, $color) {
$rad: $angle-deg * math.pi() / 180;
$base: math.round($height / math.tan($rad));
width: 0;
height: 0;
border-top: ($height / 2) solid transparent;
border-bottom: ($height / 2) solid transparent;
border-left: $base solid $color;
}为什么用伪元素 ::before / ::after 而不是空 div？
三角形图标几乎都是装饰性图形，语义上不属于内容流。用伪元素能避免 DOM 膨胀，也方便通过 content: "" 触发渲染，且样式隔离性好——父容器改 font-size 不会影响伪元素的 border 计算（前提是没用 em 单位）。
- 若在伪元素里用
em写border，实际像素值会随父元素字号缩放，但缩放比例 ≠ 字号缩放比例，容易失真 - 推荐统一用
px或rem（配合根字号固定），确保高精度 - 需要动态颜色时，别用
inherit，而是用currentColor—— 它能穿透伪元素继承文本色，且支持 CSS 变量回退
真正麻烦的是当三角形要叠加在图片或渐变背景上时，透明 border 的边缘可能因抗锯齿出现半透灰边；这时候得加 transform: translateZ(0) 强制 GPU 加速，或者用 clip-path 替代 border 方案——但那就超出 SCSS 混合宏的控制范围了。
