直接用 border 实现三角形容易出错，因需手动设置四边、透明色必须用 transparent、方向变化时易配错边；推荐用封装好的 .triangle(@direction, @size, @color) mixin 统一处理。
为什么直接用 border 实现三角形容易出错
Less 里写 CSS 三角形，本质还是靠 border 的斜角渲染，但手动写四边 border、设 transparent、调 size 容易漏掉某条边，或者透明色写成 none（无效）、0（语法错）。更麻烦的是方向一变，就得重算哪三条边要透明、哪条留色，稍不注意就反向或塌缩。
常见错误现象：border-top: 10px solid #333; border-left: 10px solid transparent; 缺了 border-right 和 border-bottom —— 浏览器会按默认值 none 渲染，导致三角形“歪掉”或根本不出形。
- 必须显式声明全部四条边，哪怕其中三条是
transparent -
transparent是唯一安全的“空边”值；0、none、unset都不能替代 - 三角形朝向由“有色边”所在方向决定，其余三边为
transparent，且三者宽度需一致
封装成 mixin：支持方向、尺寸、颜色三参数
一个真正可用的 .triangle() mixin 应该只暴露人眼可读的控制项，而不是让调用者去拼 border。下面这个版本覆盖上/下/左/右四个基础方向，并自动推导其余三边：
.triangle(@direction, @size, @color) {
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);。它比手写少犯错，也比一堆重复 border 声明更易维护。
立即学习“前端免费学习笔记（深入）”；
- 不支持斜向（如
up-left），那需要两色叠加或 clip-path，已超出 border 三角形范畴 - @size 必须是带单位的值（如
6px），不能传6，否则border简写会失效 - 若需带边框的三角形（比如外层描边），得额外加一层伪元素或 wrapper，mixin 本身不处理
扩展：带箭头的气泡框 mixin 如何复用三角形逻辑
实际项目中，三角形常作为气泡框（tooltip / popover）的指向箭头。这时不能只画三角，还得考虑定位偏移、z-index、与主体间距。推荐把三角形和容器样式拆开，用 .tooltip-arrow() 单独封装，再配合 .tooltip() 主体 mixin 组合使用：
.tooltip-arrow(@direction, @size, @color, @offset: 0) {
position: absolute;
& when (@direction = up) {
bottom: 100%;
left: 50%;
margin-left: -@size;
transform: translateX(-50%);
.triangle(down, @size, @color);
}
& when (@direction = right) {
top: 50%;
left: 100%;
margin-top: -@size;
transform: translateY(-50%);
.triangle(left, @size, @color);
}
// 其他方向同理...
}
关键点在于：箭头位置依赖 @offset 微调，但 @offset 不影响三角形本身大小，所以它和 @size 分离设计；同时所有定位都基于 transform 居中，避免因字体或 box-sizing 导致偏移偏差。
- 不要在
.triangle()里硬塞定位逻辑——它只负责“画形”，职责单一才好复用 - 如果气泡框要适配暗色模式，
@color建议传变量（如@tooltip-arrow-color），而非固定值 - IE11 不支持
transform: translateX(-50%)对position: absolute元素的居中，如需兼容，得 fallback 到margin-left: -@size这类计算值
为什么不用 clip-path 或 SVG 替代
虽然 clip-path: polygon() 或内联 <svg></svg> 也能画三角，但在 Less 工具链中它们破坏了“样式即配置”的一致性：前者需写坐标字符串（难维护），后者要插 HTML 结构（侵入性强）。而 border 三角形是纯 CSS、零 DOM、零 JS，且所有参数都可被 Less 变量和函数驱动。
不过要注意边界情况：
- 当
@size小于 1px（如0.5px），部分浏览器（尤其是 Safari）可能渲染模糊或消失，建议最小设为1px - 高 DPR 屏幕下，
1pxborder 可能显得过细，此时应配合transform: scale(2)+transform-origin放大，而非盲目增大@size - 如果项目已全面启用 CSS 自定义属性，这套 mixin 依然可用，但调用时需用
var(--color)传参，Less 无法在编译期解析 CSS 变量值
真正难的不是写出第一个三角形，而是让团队里所有人改一处就能批量更新所有箭头样式——这要求 mixin 的参数语义清晰、无隐藏副作用、不绑定具体业务类名。
