用 border 实现三角形的本质是利用 css 盒模型中透明边框的斜角渲染：宽高为 0 时，四边 border-width 与 border-color（非目标边必须为 solid transparent）共同构成等腰直角三角形。
用 border 实现三角形的本质是什么
Less 里画三角形不是靠新语法，而是复用 CSS 的 border 技巧：把元素宽高设为 0，只给某一边设置带颜色的边框，其余三边设为透明（或 transparent），浏览器渲染时会自然形成斜角——这就是三角形的几何来源。
关键点在于：必须同时控制四边 border-width 和 border-color，且非目标边不能是 none（否则不参与盒模型计算，三角形会塌）。
-
border-top+border-left/border-right为transparent→ 向下指的三角形 - 只设
border-bottom，其余为transparent→ 向上指 - 三角形大小由对应方向的
border-width值决定（比如border-top: 8px solid #000生成高约 8px 的等腰直角三角形）
封装成 Less 函数：支持方向、尺寸、颜色、定位
直接写重复的 border 声明太冗余，用 Less 的 .triangle() 混合（mixin）封装最实用。它不是函数（Less 没有返回 CSS 的函数），而是可复用的样式块。
下面这个混合覆盖主流需求，参数顺序按使用频率排：
.triangle(@direction: down, @size: 6px, @color: #000, @position: absolute) {
width: 0;
height: 0;
.position(@position);
<p>& when (@direction = up) {
border-left: @size solid transparent;
border-right: @size solid transparent;
border-bottom: @size solid @color;
}</p><p>& when (@direction = down) {
border-left: @size solid transparent;
border-right: @size solid transparent;
border-top: @size solid @color;
}</p><p>& when (@direction = left) {
border-top: @size solid transparent;
border-bottom: @size solid transparent;
border-right: @size solid @color;
}</p><p>& when (@direction = right) {
border-top: @size solid transparent;
border-bottom: @size solid transparent;
border-left: @size solid @color;
}
}</p><p>.position(@pos) when (@pos = absolute) {
position: absolute;
}
.position(@pos) when (@pos = relative) {
position: relative;
}
.position(@pos) when (@pos = static) {
position: static;
}</p>
调用示例：.triangle(up, 8px, #333, absolute) 生成一个向上指、8px 大、深灰色、绝对定位的三角形。
常见坑：透明边框必须用 transparent，不能用 none
这是最容易翻车的地方。写成 border-left: none 看似省事，但 none 表示“不绘制”，不占空间也不参与角度计算，结果就是三角形根本出不来，或者形状错乱。
- ✅ 正确：
border-left: 6px solid transparent - ❌ 错误：
border-left: none或border-left: 6px solid rgba(0,0,0,0)（后者虽视觉透明，但可能触发某些旧浏览器重绘异常） - 所有非目标边都必须是
solid transparent，且width与目标边一致，才能保证等腰直角
进阶：加边框、旋转、适配 Retina 屏
纯色三角形够用，但真实项目常要描边或微调角度。这时别硬改 border，改用 transform: rotate() 更可控；而 Retina 下小尺寸三角形容易模糊，建议用 @size * 2 再缩放回 50%。
- 描边效果：在三角形外层套一层
box-shadow: 0 0 0 1px #999（比多层 border 更稳） - 微调角度：用
transform: rotate(2deg)，注意加上transform-origin: center - Retina 清晰化：
transform: scale(0.5); transform-origin: 0 0;配合@size: 12px，视觉大小仍是 6px 但像素更准
三角形本身没有“抗锯齿开关”，它的清晰度完全取决于你设的 border-width 是否为整数像素、以及是否被 subpixel 渲染干扰——这点在小尺寸（≤4px）时尤其明显，宁可略放大再缩放，也不要强行设 3.5px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
