直接用border简写会失效，因其重置所有边的border-style和border-color，破坏transparent边与设色边的斜接关系，导致三角形塌陷或消失；必须显式声明四边样式，方向与设色边对应：top→border-bottom、bottom→border-top、left→border-right、right→border-left。
为什么直接用 border 简写会失效
常见错误是写成：@mixin triangle($dir, $size, $color) { border: $size solid transparent; border-#{$dir}: $size solid $color; }。这看似省事，但border简写会重置所有边的border-style和border-color，导致原本设为transparent的边被覆盖成solid或继承父级颜色——斜接关系一乱，三角就塌了或完全不显示。
triangle Mixin 必须显式声明四条边
正确做法是老老实实写全四条border-*，且统一用solid（dashed transparent在旧版 Safari 更稳，但现代项目可统一用solid）：
-
top箭头 →border-bottom设色，其余三边solid transparent -
bottom箭头 →border-top设色 -
left箭头 →border-right设色 -
right箭头 →border-left设色
SCSS中$dir是字符串，border-#{$dir}只对left/right生效；top/bottom必须用@if分支，否则编译报错。
尺寸可控的关键：等腰 vs 非等腰反推
纯border三角的底边 = 2 × border-width，高 = border-width（仅限等腰直角）。若需精确控制（如底边12px、高8px）：
- 等腰三角（如向下箭头）：
border-left和border-right各取$base / 2，border-top取$height - 非等腰（如
30°锐角）：先转弧度$rad: $deg * math.pi() / 180，再用math.tan($rad)算比例，结果必须math.round()包裹，避免小数像素导致 subpixel 模糊 - IE 不支持
math.*函数，需降级为固定比例查表或 JS 补充
跨浏览器兼容性容易被忽略的点
旧版 Safari 对solid transparent渲染不稳定，dashed transparent更可靠；但现代 Chrome/Firefox/Edge 已无此问题。真正影响兼容性的其实是math.*函数——Sass 1.30+ 才默认启用math模块，低于此版本需手动开启或回退到unit() + 字符串拼接。另外，vertical-align: middle建议始终加在调用处，否则三角图标在行内上下位置容易飘移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
