CSS生成高精度三角形图标，SCSS宏控制参数

CSS用border绘制三角形常因底边与高度的隐式比例关系（底边=2×border-width、高=border-width）导致尺寸失控，尤其在需精确控制底宽和高度、响应式适配或非等腰形状时尤为棘手；本文深入剖析原理，并借助Dart Sass的math.tan()与math.round()等函数，通过SCSS混合宏将设计师指定的「目标尺寸」智能反推为准确border值，支持等腰与任意角度三角形的高精度生成，同时倡导使用伪元素+currentColor+px/rem单位的语义化、高性能实践，兼顾兼容性、可维护性与视觉保真度。

用 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 混合宏的控制范围了。

到这里，我们也就讲完了《CSS生成高精度三角形图标，SCSS宏控制参数》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！