用 scss @mixin 封装 border 三角箭头，核心是守住 width:0、height:0、三边 transparent 三条底线；方向由设色边决定（如 top 箭头用 border-bottom），大小仅由对应 border-width 控制，简写覆盖会破坏斜接关系，必须显式声明四边样式。
直接说结论：用 SCSS @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 简写会重置所有边的 style 和 color，导致原本设为 transparent 的边被覆盖成 solid 或继承父级颜色。浏览器实际渲染时，四个角的斜接关系就乱了。
- 必须显式声明每条边的
border-style和border-color - 设色边用
solid，其余三边统一用dashed transparent或solid transparent（dashed在某些旧版 Safari 中更稳） - 别依赖简写覆盖，老老实实写全四条
border-*
@mixin triangle 必须处理的四个方向逻辑
方向不是“画朝哪”，而是“哪边留色”。比如 top 表示箭头朝上，实际是靠 border-bottom 设色实现的——这点极易反直觉，写错就倒着长。
-
top→border-bottom: $size solid $color，其余三边transparent -
bottom→border-top: $size solid $color -
left→border-right: $size solid $color -
right→border-left: $size solid $color
注意：SCSS 中 $dir 是字符串，要用 #{} 插值进属性名，如 border-#{$dir} 仅对 left/right 有效；top/bottom 需单独分支判断，否则编译报错。
移动端和 IE 兼容性绕不开的坑
border 三角在 IE8+ 原生支持，但两个细节常被忽略：
- IE8 不认
transparent，得 fallback 到rgba(0,0,0,0)或十六进制带 alpha 的#00000000（需确认项目是否启用 IE8 RGBA 支持） - 移动端缩放时，若用
em或rem做border-width，字体缩放会连带拉伸三角，比例失真；一律用px - 高 DPI 屏下小尺寸三角（如
4px）易发虚，建议最小用5px起，避免4.5px这类小数
伪元素叠加实现“描边三角”要算准偏移量
真要加边框，不能给同一个元素套两层 border（CSS 不允许），得用 ::before + ::after 叠两层三角：
- 外层（描边）比内层大
1px，但偏移不能简单top: -1px - 等腰直角三角斜边长度是
√2 × border-width，所以垂直/水平偏移应为0.707 × 边框宽度，四舍五入取0.7px或1px（视精度要求） - 两个伪元素都必须加
position: absolute和content: ""，且width: 0; height: 0;缺一不可
最麻烦的其实是定位基准点——border 渲染中心不等于元素 content box 中心，尤其当父级有 transform: scale() 或 font-size: 0 时，三角会整体漂移。调试时加一句 outline: 1px dashed red，比反复调 top/left 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
