用scss @mixin封装border三角形，核心是守住width:0、height:0、三边transparent三条底线；方向由设色边决定（如top箭头用border-bottom），大小仅由对应border-width控制，简写覆盖会破坏斜接关系，必须显式声明四边样式。
直接用 @mixin 封装 border 三角形，核心不是堆参数，而是守住三条底线：width: 0、height: 0、三边 transparent；方向由设色边决定，大小只由对应 border-width 控制。
为什么不能用 border 简写覆盖设色边？
常见错误是这样写：
@mixin triangle($dir, $size, $color) {
border: $size solid transparent;
border-#{$dir}: $size solid $color;
}
这会导致问题：border 简写会重置所有边的 border-style 和 border-color，原本设为 transparent 的边可能被覆盖成 solid 或继承父级颜色，斜接关系一乱，三角就变形或消失。
- 必须显式声明四条边的
border-style和border-color - 设色边用
solid $color，其余三边统一用solid transparent（或dashed transparent，旧版 Safari 更稳） -
border-#{$dir}插值仅对left/right有效；top/bottom需单独@if分支，否则编译报错
@mixin triangle-down 等方向 mixin 必须怎么写？
方向不是“箭头朝哪”，而是“哪边留色”——这点极易反直觉。例如 triangle-down 是靠 border-top 设色实现的，不是 border-bottom。
-
top→border-bottom: $size solid $color -
bottom→border-top: $size solid $color -
left→border-right: $size solid $color -
right→border-left: $size solid $color
正确示例：
@mixin triangle-down($size, $color: currentColor) {
width: 0;
height: 0;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid $color;
}
如何让三角尺寸真正可控（比如底边 12px、高 8px）？
纯 border 三角的底边 = 2 × border-width，高 = border-width（等腰直角时），无法独立控制。若需精确尺寸，得用 SCSS 数学反推：
- 等腰三角（如向下箭头）：
border-left和border-right各取$base / 2，border-top取$height - 非等腰（如 30° 锐角）：需用
math.tan()，但注意它接收弧度而非角度 —— 先转弧度：$rad: $deg * math.pi() / 180 - 务必用
math.round()包裹结果，避免小数像素导致 subpixel 模糊 - IE 不支持
math.*，需降级为固定比例查表或 JS 补充
示例（等腰）：
@use "sass:math";
@mixin triangle-down-exact($base, $height, $color: currentColor) {
width: 0;
height: 0;
border-left: math.round($base / 2) solid transparent;
border-right: math.round($base / 2) solid transparent;
border-top: math.round($height) solid $color;
}
移动端和 IE 兼容性里最常踩的坑
看似简单的三角，在真实项目中容易在细节上翻车：
- IE8 不认
transparent，得 fallback 到rgba(0, 0, 0, 0)或带 alpha 的十六进制（如#00000000），前提是项目已启用 IE8 RGBA 支持 - 用
em/rem做border-width时，字体缩放会连带拉伸三角，比例失真 —— 一律用px - 高 DPI 屏下小尺寸三角（如
4px）易发虚，建议最小用5px起，避开4.5px这类小数 - 伪元素叠加描边时，偏移量不能简单
top: -1px—— 等腰直角三角斜边长是√2 × border-width，需按此算准
复杂点不在逻辑，而在这些「默认以为能跑通」的边界条件 —— 它们往往只在上线后某个机型、某次缩放、某个旧浏览器里突然暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
