scss三角箭头@mixin必须显式声明四条border：因border简写会重置所有边的style和color，破坏斜接关系；方向参数$dir表示“哪边留色”而非“箭头朝哪”，故top对应border-bottom、bottom对应border-top、left对应border-right、right对应border-left；width/height必须为0，尺寸仅由设色边的border-width控制；伪元素调用时content: ""不可省略。
SCSS @mixin 三角箭头必须显式声明四条 border
直接用 border 简写覆盖某一边，比如 border: $size solid transparent; border-bottom: $size solid $color;，会导致三边透明失效——border 简写会重置所有边的 style 和 color，浏览器渲染时斜接关系错乱，箭头变形或消失。
正确做法是四条边全部显式写出，且统一用 solid 或 dashed（旧版 Safari 推荐 dashed transparent 更稳）：
border-top: $size solid transparent;border-right: $size solid transparent;-
border-bottom: $size solid $color;← 朝上的箭头设这一边 border-left: $size solid transparent;
别图省事合并写，@mixin 的可靠性就卡在这一步。
方向参数 $dir 不是“箭头朝哪”，而是“哪边留色”
top 表示箭头朝上，实际靠 border-bottom 设色实现；bottom 朝下则靠 border-top。这个逻辑反直觉，但底层原理决定如此：三角形由非零边与零宽高元素的斜接生成，留色边即为对边。
所以 @mixin triangle($dir, $size, $color) 不能简单插值 border-#{$dir} —— 那只对 left/right 有效，top/bottom 必须分支处理：
- 当
$dir == 'top'：设border-bottom - 当
$dir == 'bottom'：设border-top - 当
$dir == 'left'：设border-right - 当
$dir == 'right'：设border-left
否则 SCSS 编译直接报错：Unknown property “border-top”（如果误写成 border-top 但插值进 border-#{$dir} 且 $dir 是 'top'，语法合法但语义错）。
尺寸只由对应 border-width 控制，width/height 必须为 0
箭头大小和方向完全解耦：大小只取决于设色边的 border-width 值，width 和 height 必须固定为 0，任何非零值都会撑开容器、破坏三角形结构。
常见翻车点：
- 在 mixin 外层容器上误加
width: 10px，导致箭头偏移或被裁剪 - 用
font-size或line-height试图缩放箭头——无效，三角形不响应字体相关属性 - 把
$size当成整体尺寸传入，却在内部混用em或百分比单位，造成缩放失真
安全做法：所有尺寸参数统一用 px 或 rem，并在 mixin 内部严格绑定到 border-* 的 width 值，其他尺寸属性一律不碰。
伪元素调用时 content 属性不可省略
用 ::before 或 ::after 实现箭头时，如果漏写 content: ""，伪元素不会渲染，CSS 规则形同虚设——这是最常被忽略的硬性前提。
同时注意定位配合：
- 父容器需设
position: relative - 伪元素需设
position: absolute+top/right/bottom/left偏移 - 若箭头需居中对齐（如 tooltip 顶部居中），
left: 50%后要补transform: translateX(-50%)，否则按左边缘对齐
复杂场景下，z-index 也得检查——箭头容易被父级 overflow: hidden 截断，或被其他层遮挡，这不是 mixin 问题，但常被归咎于样式本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
