用 border 画三角形可行是因为浏览器渲染时相邻边交界处自动形成斜角，当元素宽高为0且仅单边有色、其余三边 transparent 时，该斜角即呈现为等腰直角三角形；这是 css 规范行为，现代浏览器均稳定支持。
为什么用 border 画三角形是可行的
浏览器渲染 border 时，相邻两条边的交界处会自然形成斜角；当元素宽高为 0，只设置某一边的 border（其余为 transparent），这个斜角就会显现出纯色三角形。这不是 hack，而是 CSS 规范定义的行为，所有现代浏览器都稳定支持。
Less 中写成 mixin 能复用方向、尺寸、颜色，避免重复写四条 border 声明。
.triangle() mixin 的基本结构和参数设计
一个实用的三角形 mixin 至少要控制：方向（up/down/left/right）、大小（通常用 border-width 推导）、颜色。不建议把 border-color 拆成四个值传入——多数场景只需单色三角形，且透明边必须严格匹配方向逻辑。
-
@direction：必填，字符串，限定为up、down、left、right -
@size：必填，长度值，如6px，它将作为非透明边的border-width -
@color：可选，默认currentColor，方便继承文字色
示例：
.triangle(@direction, @size, @color: currentColor) {
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;
}
}
容易被忽略的兼容性与布局问题
三角形本质是零宽高元素，它默认是 inline 级别，会受父容器 line-height 和 vertical-align 影响，常出现位置偏移或底部留白。
- 务必加
display: block或display: inline-block，并设vertical-align: top或middle - 若用于下拉箭头等小图标，
@size建议用px而非em，避免字体缩放时比例失真 - IE8 不支持
transparent作为border-color的独立值（需写rgba(0,0,0,0)或#00000000），但 Less 编译后是静态 CSS，可另配 IE8 专用 mixin 分支
如何在实际组件中安全调用
直接在选择器里用 .triangle(up, 6px, #333) 是最简方式，但要注意：mixin 展开后会覆盖同名属性。如果该选择器已声明过 border-style 或 width，可能出意料之外的结果。
- 推荐封装一层语义类，比如
.icon-arrow-down，内部只调用.triangle()，不混写其他样式 - 若需响应式三角形（如随字号缩放），可用
em单位，但需同步调整font-size上下文，否则em值无意义 - 不要试图用
transform: scale()放大三角形——它会模糊边缘，且border渲染精度下降
真正难的不是画出来，而是让三角形在各种 flex、grid、position: absolute 场景下稳稳停在该在的位置；每次加完 .triangle()，记得检查它的盒模型表现和基线对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
