scss三角箭头@mixin必须显式声明四条border，因border简写会重置所有边的style和color，破坏斜接关系；$dir表示“哪边留色”而非“箭头朝向”，故top对应border-bottom、bottom对应border-top、left对应border-right、right对应border-left，且width/height必须为0。
SCSS三角箭头@mixin必须显式声明四条border
直接用border简写（比如border: $size solid transparent）会重置所有边的border-style和border-color，导致三边透明失效、斜接关系错乱——三角形要么变形，要么完全不显示。必须显式写出四条边，且统一用solid（旧版 Safari 可改用dashed transparent更稳）：
border-top: $size solid transparentborder-right: $size solid transparent-
border-bottom: $size solid $color← 朝上的箭头靠这一边设色 border-left: $size solid transparent
漏掉任意一条，或混用none/hidden，都可能让渲染结果在 Safari 或 Edge 中异常。
方向参数$dir不是“箭头朝哪”，而是“哪边留色”
SCSS 中$dir语义容易误解：它不表示箭头指向，而是指“哪条边保留实色”。底层原理决定如此——三角由零宽高元素+单边有色边框斜接生成，留色边即为对边：
-
top→ 实际设border-bottom（箭头向上） -
bottom→ 实际设border-top（箭头向下） -
left→ 实际设border-right（箭头向左） -
right→ 实际设border-left（箭头向右）
如果写成border-#{$dir}: $size solid $color，对top/bottom会编译失败或逻辑错误；必须用@if分支处理：
@mixin triangle($dir, $size, $color) {
width: 0;
height: 0;
border-style: solid;
@if $dir == 'top' {
border-bottom: $size solid $color;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-top: $size solid transparent;
}
@else if $dir == 'bottom' {
border-top: $size solid $color;
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid transparent;
}
// …其余方向同理
}
气泡框伪元素定位必须配对父容器position: relative
伪元素::before或::after要精准附着在气泡上，两个条件缺一不可：
- 气泡容器必须有
position: relative（不能是static，也不能靠祖父级提供） - 伪元素必须含
content: ""（写成content: " "或省略引号都会导致不渲染）
常见失效现象：::after飘到页面左上角、箭头位置随滚动偏移、移动端点击区域错位。根本原因几乎全是漏了position: relative，或把该声明加在了内容子元素而非气泡最外层容器上。
响应式下三角尺寸与居中需分层控制
纯border三角的底边宽度 = 2 × $size，高度 ≈ $size（等腰直角），无法独立调节。若需精确控制（比如底边12px、高8px），得用 SCSS 数学反推：
- 等腰三角（如向下箭头）：
border-left和border-right各取$base / 2，border-top取$height - 非等腰（如30°锐角）：用
math.tan($deg * math.pi() / 180)算比例，再math.round()避免 subpixel 模糊 - 居中用
left: 50%; transform: translateX(-50%)，但 iOS Safari 9.3 及更早版本不支持transform，需兜底：left: calc(50% - #{$size})
真正容易被忽略的是：当气泡用border-radius时，三角根部会与圆角脱节；必须手动微调top或bottom值（通常+1–2px），否则视觉上出现明显缝隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
