css三角形原理是利用宽高为0元素的单侧实色border与其余三边等宽透明border交汇形成的斜角视觉效果；less通过变量和条件混合器封装方向、尺寸、颜色参数实现复用。
Less中用border绘制三角形的原理是什么
CSS三角形本质是利用元素border的斜角交界处形成的视觉效果。当一个宽高为0的元素，只设置单侧border（比如border-bottom），其余三边设为透明且等宽时，border交汇点就会呈现一个实色三角形。Less本身不新增绘制能力，但能通过变量、参数和嵌套让这个过程可复用、易维护。
- 必须将
width和height都设为0，否则border交界会被内容区域干扰 - 四边
border宽度需一致（除非你刻意做非等腰三角形），透明边必须用transparent，不能用rgba(0,0,0,0)（IE8不兼容） -
font-size: 0和line-height: 0建议加上，避免某些浏览器因行内元素默认基线导致位置偏移
如何封装一个支持方向/尺寸/颜色的Triangle混合器
核心是把方向（top/right/bottom/left）、大小（边长）、颜色抽象成参数。注意：border三角形的“边长”实际对应border-width值，而最终图形高度/宽度约等于border-width × √2（等腰直角情形），但用户更关心“看起来多大”，所以按border-width暴露更直观。
.triangle(@direction: top, @size: 6px, @color: #000) {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
<p>& when (@direction = top) {
border-left: @size solid transparent;
border-right: @size solid transparent;
border-bottom: @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>& when (@direction = bottom) {
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>
-
@direction用when条件判断，比用if更符合Less语法习惯 - 不推荐用
rotate()替代方向切换——会触发重排且影响父容器布局流 - 若需带边框的三角形（比如白底黑边），得额外加一层伪元素或包裹容器，混合器本身不处理描边逻辑
为什么直接调用.triangle()可能不生效
常见失效原因不是混合器写错，而是调用上下文破坏了渲染条件：
- 调用在
:before或:after伪元素上时，忘了加content: ""（Less编译后仍是必需的） - 父元素设置了
overflow: hidden，而三角形靠border“撑出”的区域被裁剪（尤其bottom或right方向） - 使用了
display: inline且未清除默认间隙，导致位置浮动；建议统一用display: inline-block或display: block - 在Flex容器中，若未设置
align-self，top和bottom方向的三角形可能被拉伸变形
需要箭头带阴影或渐变怎么办
纯border三角形无法直接应用box-shadow或background-image，因为它是border构成的，不是真实内容区域。可行解法只有两个：
- 用
filter: drop-shadow()（注意兼容性：IE全系不支持，iOS Safari 9.3+） - 改用
clip-path+background（例如clip-path: polygon(50% 0%, 0% 100%, 100% 100%)），但需额外容器和固定宽高，失去border方案的“零宽高”优势
真正复杂的图标（如带缺口、双色、圆角尖端）建议放弃border方案，改用SVG或字体图标。Less混合器适合的是语义明确、轻量、需批量生成的方向指示类三角形——它解决的是重复劳动，不是图形学边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
