推荐用 .triangle(@direction, @size, @color) mixin 生成气泡尖角，支持 up/down/left/right 方向，避免手写 border 折叠错误；需确保父容器 position: relative，三角用 absolute + transform 居中；尺寸建议用 em 单位适配响应式，ie11 不支持 & when 时应拆为四个独立 mixin。
用 triangle Mixin 生成气泡尖角，别手写 border 折叠
纯 CSS 气泡提示的三角形，本质是利用三边透明 + 一边有色的 border 折叠效果。Less 里硬写四条 border 容易错方向、漏单位、搞混透明色，直接用 Mixin 封装更稳。
推荐写一个接受方向、大小、颜色三个参数的 .triangle()，比如：
.triangle(@direction, @size: 6px, @color: #333) {
width: 0;
height: 0;
border-style: solid;
& when (@direction = up) {
border-width: 0 @size @size @size;
border-color: transparent transparent @color transparent;
}
& when (@direction = down) {
border-width: @size @size 0 @size;
border-color: @color transparent transparent transparent;
}
& when (@direction = left) {
border-width: @size @size @size 0;
border-color: transparent @color transparent transparent;
}
& when (@direction = right) {
border-width: @size 0 @size @size;
border-color: transparent transparent transparent @color;
}
}调用时只写 .triangle(up, 5px, #666)，方向和尺寸一目了然。
气泡主体和三角必须共用定位上下文，否则会偏移
常见错误：把三角单独提成一个 &::after，但父容器没设 position: relative，导致 top/left 相对于 body 定位，飘走。
必须确保气泡内容区（如 .tooltip）自身有 position: relative，三角用 absolute 贴在它内部：
.tooltip {
position: relative;
padding: 8px 12px;
background: #333;
color: #fff;
border-radius: 4px;
}
.tooltip::after {
content: '';
position: absolute;
.triangle(up, 6px, #333);
top: 100%;
left: 50%;
transform: translateX(-50%);
}注意 transform: translateX(-50%) 是居中关键——只靠 left: 50% 会让三角尖点对齐左边缘，不是中心。
响应式下三角尺寸要随字体缩放，别写死 px
如果气泡文字用 rem 或 em，三角还用 6px，小屏下就会显得突兀大或细不可见。
改用相对单位：
- 用
@size: 0.375em（即 6px / 16px），和基础字号联动 - 或直接传入
0.5em调用：.triangle(down, 0.5em, #000) - 避免在 Mixin 内部做单位转换，让调用者控制更灵活
border-color 别写 transparent 太死——有些场景需要半透阴影，可改为 fade(@color, 0%)，方便后期统一调整透明度。
IE11 不支持 & when 条件编译，得降级为多个独立 Mixin
Less 3.5+ 的 & when 在 IE11 编译环境（如老版 Webpack + less-loader）里可能报错或忽略条件分支。
稳妥做法是拆成四个明确 Mixin：
.triangle-up(@size: 6px, @color: #333) { ... }
.triangle-down(@size: 6px, @color: #333) { ... }
.triangle-left(@size: 6px, @color: #333) { ... }
.triangle-right(@size: 6px, @color: #333) { ... }调用时选对应名字，虽然多写几个词，但零兼容风险。顺带一提：所有 border-width 值必须带单位（6px 不行，6px 可以），Less 会严格校验，漏单位直接编译失败。
三角的位置计算和单位联动是最容易被跳过的两步——方向写对了，尺寸和父容器字号不匹配，还是会错位；Mixin 写漂亮了，编译环境不认条件语法，上线就白忙。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
