用单个带方向参数的@mixin triangle更安全易维护，核心是宽高为0时仅设某边border为颜色、其余transparent，需显式重置宽高、设content:""、position:absolute及对应方位偏移。
怎样用 @mixin 画一个可控方向的纯CSS三角形
直接给结论：别写四个独立的 @mixin triangle-up/triangle-down……用单个带方向参数的混合宏更安全、易维护。SCSS 本身不渲染，但错误的方向逻辑或遗漏的 border 清除会导致三角形错位、残留边框或在缩放时失真。
核心原理是利用元素宽高为 0 时，仅设置某一边 border（其余设为 transparent）来“挤出”三角形。方向由哪条边有颜色决定，尺寸由该边的 border-width 控制。
实操建议：
- 必须显式重置
width和height为0，否则内容区会干扰三角形定位 - 所有未参与成形的
border必须设为transparent，不能省略——否则某些浏览器（如旧版 Safari）会 fallback 到默认色（通常是黑色） - 避免用
em或rem做border-width，响应式场景下易受父级字体影响；推荐用px或vw - 若需支持 CSS 变量动态控制，可在混合宏内用
#{}插值，但注意变量作用域——它只能读取已声明的全局或局部变量，不能“反向注入”
@mixin triangle 的参数设计与常见误用
一个健壮的三角形混合宏至少要覆盖方向、大小、颜色三个维度。方向建议用字符串枚举（"up"/"down"/"left"/"right"），而不是布尔或数字——可读性强，IDE 也能提示补全。
典型错误现象：@include triangle("up", 8px, red) 编译后三角形朝下，或根本不可见。这通常是因为：
- 方向映射逻辑写反了（比如把
border-bottom当作向上三角形） - 漏写了
border-style: solid——部分浏览器（如 Firefox）对border-color单独设置不生效 - 传入负值或
0作为尺寸，导致边框塌缩失效 - 在 flex 容器中使用时未加
align-self或margin调整位置，视觉上“偏移”
推荐参数签名：@mixin triangle($direction, $size, $color: currentColor)，其中 $color 默认继承文字色，兼顾语义和灵活性。
如何让三角形适配伪元素并避免布局污染
绝大多数真实场景里，三角形是用 ::before 或 ::after 实现的，而非额外 DOM 元素。这就要求混合宏生成的样式能干净地作用于伪元素，且不破坏父容器流式布局。
关键点：
- 混合宏内部必须包含
content: ""——否则伪元素不会渲染，这是最常被忽略的一行 - 应强制设
position: absolute，并附带top/right/bottom/left的占位逻辑（例如up时设bottom: 100%，right时设left: 100%），否则三角形会撑开父容器高度/宽度 - 避免在混合宏里写
display或z-index——这些属于定位上下文，应由调用方根据场景决定 - 如果三角形需要随父元素缩放（如响应式 tooltip），
$size推荐用calc()表达式传入（如calc(2vw + 4px)），混合宏内不做计算，只原样注入
要不要支持箭头+边框组合？小心性能陷阱
有些设计稿要求“带描边的三角形”，比如 tooltip 尖角外一圈 1px 白边。看似只需多一层 border，但实际会触发两层边框叠加，导致渲染模糊或锯齿——尤其在高 DPI 屏幕上。
更稳妥的做法是用双重伪元素：外层画大一号的灰色三角形，内层画小一号的主色三角形，通过 transform: translate() 精确叠放。但这已超出单个混合宏职责范围。
所以建议：
- 基础
@mixin triangle只负责单色、无描边三角形，保持轻量和确定性 - 如需描边效果，另封装
@mixin triangle-outline，接受内外双尺寸和双颜色，并明确文档注明：它会生成两个绝对定位伪元素，调用处需确保父元素position: relative - 禁用
box-shadow模拟描边——在斜边边缘会产生不自然的渐变晕染，且无法精确控制粗细
真正难的不是写出来，而是想清楚这个三角形是否真的需要脱离文档流、是否会被动画驱动、是否会出现在 will-change: transform 区域里——这些都会影响你最终选择用纯 CSS 还是 SVG 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
