CSS如何生成高精度的三角形图标_利用SCSS混合宏控制参数-css教程-PHP中文网

css用border画三角形尺寸不准，因底边=2×border-width、高=border-width，等腰三角形需按$base/2和$height设左右/下边框；非等腰需math.tan()转弧度计算并round取整，伪元素更语义化且避免dom膨胀。

css如何生成高精度的三角形图标_利用scss混合宏控制参数

用 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+）或自定义函数。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

使用 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;
}