手写border三角形易出错是因为人易漏边、写错transparent、缺单位或混淆方向逻辑；推荐用.triangle(@direction,@size,@color)Mixin封装，统一设四边透明再单边着色，语义清晰且防错。
为什么手写 border 三角形总出错
不是浏览器不支持，是人容易漏边、写错透明色、单位缺失。比如只写 border-bottom: 6px solid #333，缺了其他三边——浏览器会按默认 border-style: none 渲染，结果啥也不显示；又或者把 transparent 写成 none 或 0，语法直接失效。
更隐蔽的问题是方向逻辑：上三角靠 border-bottom 显色，下三角却要靠 border-top，左右同理。每次换方向都得重推一遍哪边留色、哪三边透明、宽度怎么配，极易翻车。
-
transparent是唯一安全的“空边”值，none/unset/initial都不行 -
@size必须带单位（如6px），传6会导致border简写解析失败 - 零宽高元素默认是
inline，受line-height和vertical-align影响，常出现底部留白或偏移
.triangle() Mixin 的参数设计与调用方式
一个真正能落地的 .triangle() 应该只暴露三个可控维度：方向、大小、颜色。方向限定为 up/down/left/right 字符串，避免拼错；大小必须是带单位的长度值；颜色默认用 currentColor，方便继承文字色。
推荐用 border 简写统一设四边宽度和透明色，再单独覆盖单边颜色——比手动写四条 border-* 更稳：
立即学习“前端免费学习笔记（深入）”；
.triangle(@direction, @size, @color: currentColor) {
width: 0;
height: 0;
border: @size solid transparent;
& when (@direction = up) { border-bottom-color: @color; }
& when (@direction = down) { border-top-color: @color; }
& when (@direction = left) { border-right-color: @color; }
& when (@direction = right) { border-left-color: @color; }
}调用时直给语义化参数：.triangle(up, 6px, #007bff)，不用记哪边该写 solid。
IE11 兼容性下 & when 的 fallback 方案
IE11 不支持 Less 的 & when 条件嵌套语法，编译会报错。如果项目还要兼容它，就得拆成四个独立 Mixin，用命名区分方向：
.triangle-up(@size, @color: currentColor) {
width: 0; height: 0;
border: @size solid transparent;
border-bottom-color: @color;
}
.triangle-down(@size, @color: currentColor) {
width: 0; height: 0;
border: @size solid transparent;
border-top-color: @color;
}
/* left / right 同理 */虽然多写几行，但确保所有环境都能跑通。现代项目可忽略此条，但上线前务必确认构建工具使用的 Less 版本是否 ≥ 3.5。
气泡箭头定位时最常漏掉的两件事
三角形画出来只是第一步。实际用在 tooltip/popover 上时，90% 的偏移问题都源于这两点没做：
- 父容器（如
.tooltip）没设position: relative，导致absolute定位的三角形相对于 body 偏移 - 没控制三角形自身的
display和vertical-align，尤其当它作为内联元素插入文本流时，line-height会把它往下顶出一截
稳妥做法是：三角形元素加 display: block + vertical-align: top，再用 top/left 配合 transform: translate(-50%, -50%) 居中对齐——尺寸变化时位置依然稳定。
