直接用 border 手写三角形易出错，封装 .triangle("up", 6px, #007bff) mixin 是唯一稳妥做法；方向参数须加英文引号、尺寸必带单位、透明边只能用 transparent、四边须显式声明、需设 display 和 position 定位。
直接用 border 手写三角形容易漏边、配错透明色、方向反掉——封装成 .triangle() Mixin 是唯一稳妥做法，它把方向、尺寸、颜色三要素收束到一行调用里，编译后生成的 CSS 干净且可预测。
方向参数必须加英文引号
Less 的 & when (@direction = up) 会把未加引号的 up 当作变量名去查找，找不到就默认为 undefined，最终所有调用都 fallback 到第一个匹配分支（通常是 up）。这不是 bug，是 Less 解析逻辑决定的。
- ✅ 正确：
.triangle("up", 6px, #007bff) - ❌ 错误：
.triangle(up, 6px, #007bff)（up被当变量） - ❌ 错误：
.triangle(“up”, 6px, #007bff)（中文引号，编译报错） - 大小写敏感：
"Up"≠"up"，后者才匹配成功
尺寸单位不能省略
@size 必须带单位（如 6px、0.5em），否则 border: @size solid transparent 会被编译成 border: 6 solid transparent —— 浏览器不认无单位数值，整条声明失效，三角形直接消失。
- ✅
@size: 6px、@size: 1.2rem - ❌
@size: 6、@size: 1.2 - 单位影响渲染精度：用
px最稳；用em或rem适合响应式气泡箭头，但需注意父级font-size变动带来的缩放
透明边只能用 transparent
三角形靠三边 transparent + 一边有色边的 border 折叠形成尖角。none、0、unset 都不能替代 transparent，它们会导致该边宽度归零或样式丢失，破坏斜角交点。
- ✅
border-color: transparent transparent @color transparent - ❌
border-color: none none @color none（无效语法） - ❌
border-color: 0 0 @color 0（0不是合法 color 值） - 所有四条边必须显式声明，哪怕其中三条是
transparent；漏写某条边，浏览器按默认border-color: currentColor渲染，立刻出错
定位和 display 容易被忽略
三角形元素宽高为 0，默认是 inline 级别，受父容器 line-height 和 vertical-align 影响，常出现底部留白或上下偏移。
- 务必加
display: block或display: inline-block - 配合
vertical-align: top或middle消除基线对齐干扰 - 若用于气泡箭头，父容器必须设
position: relative，三角本身用position: absolute定位，否则top/left会相对于 viewport 计算 - IE11 不支持
& when条件编译，需拆成四个独立 Mixin（如.triangle-up()、.triangle-down()）才能兼容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
