css三角形本质是利用宽高为0元素的border斜角交界特性：单边设色、其余三边用transparent等宽，形成45°等腰直角三角形；less通过封装方向、尺寸、颜色参数的mixin实现安全复用。
Less中用border画三角形的原理是什么
CSS三角形本质是利用元素border的斜角交界特性：当一个块级元素宽高为0，只设置某一边的border（比如border-bottom），其余三边设为透明或无色时，border会以45°斜角交汇，形成三角形。关键点在于——必须让其他三边的border-color设为transparent，不能用none或0，否则不渲染交界。
常见错误是写成：border: 5px solid transparent;再单独设border-bottom-color: #000;——这不行，因为border简写会重置所有边颜色，transparent会覆盖掉你后设的border-bottom-color。
封装border三角形Mixin的参数设计
一个实用的Mixin至少要支持方向、大小、颜色三个变量，方向决定哪条边是实色，其余三边自动设为transparent；大小统一控制border宽度；颜色只作用于目标边。
推荐写法：
.triangle(@direction, @size, @color) {
width: 0;
height: 0;
border-style: solid;
& when (@direction = top) {
border-width: 0 @size @size @size;
border-color: transparent transparent @color transparent;
}
& when (@direction = right) {
border-width: @size @size 0 @size;
border-color: transparent @color transparent transparent;
}
& when (@direction = bottom) {
border-width: @size @size 0 @size;
border-color: @color transparent transparent transparent;
}
& when (@direction = left) {
border-width: @size 0 @size @size;
border-color: transparent transparent transparent @color;
}
}
注意：border-width顺序是上右下左，border-color顺序必须严格对应，否则三角形会错位或消失。
使用时容易忽略的兼容性细节
这个技巧在所有现代浏览器都可靠，但有两点必须手动处理：
- IE8及以下不支持
transparent作为border颜色，需降级为rgba(0,0,0,0)或干脆放弃支持 - 若三角形需要响应式（比如随字体缩放），建议用
em或rem单位传入@size，避免固定px导致小屏幕溢出 - 不要给三角形元素加
padding或margin以外的布局属性（如display: inline-block），它本身没有内容流，容易被父容器裁剪
如何扩展支持带边框的三角形
纯色三角形够用，但有时需要“描边”效果（比如底色#333 + 1px白色边）。这时不能简单叠加两层border——因为border交界会变模糊。正确做法是用两个重叠的三角形：大一号的做边框，小一号的盖在上面做主体。
可扩展Mixin加一个@stroke参数：
.triangle-stroked(@direction, @size, @color, @stroke: 1px, @stroke-color: #fff) {
position: relative;
&::before {
content: "";
position: absolute;
.triangle(@direction, @size + @stroke, @stroke-color);
}
&::after {
content: "";
position: absolute;
.triangle(@direction, @size, @color);
}
}
调用时注意：必须给宿主元素设position: relative，且::before和::after的定位偏移需根据方向微调（比如top: -@stroke），否则边缘会错位。
translateZ(0)或will-change: transform强制硬件加速来稳住位置。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
