border画三角形的本质是利用border斜角渲染特性实现“留白+裁剪”：宽高为0时，三边透明、一边有色的border交汇形成尖角视觉区域。
border画三角形的本质是什么
本质是利用 border 的斜角渲染特性：当一个元素宽高为 0，只设单边 border（比如 border-bottom），其余三边设为透明或不同色时，浏览器会把四条边的交汇点强制“挤”成一个尖角——这个尖角就是三角形的顶点。
关键不是“画”，而是“留白+裁剪”：你看到的三角形，其实是相邻两条透明 border 与一条有色 border 相交后自然形成的视觉区域。
最简可行写法（纯 border + 0 尺寸）
下面这段代码能稳定画出向下的黑色小三角：
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
要点：
立即学习“前端免费学习笔记（深入）”；
-
width和height必须为0，否则边框会“撑开”，三角形变形 - 左右两边用
transparent是为了“隐藏”它们，只让顶部边框显形；方向由哪条边有颜色决定（border-top→ 向下，border-bottom→ 向上，border-left→ 向右，border-right→ 向左） - 三个
border的宽度必须相等，否则三角形歪斜或不闭合
常见翻车现场和修复方式
实际用的时候，三角形突然消失、错位、变粗，大概率踩了这几个坑：
- 父容器设置了
overflow: hidden，而三角形靠position: absolute偏移了一点点——超出父容器就被裁掉了。解决：给父容器加overflow: visible或调大偏移量预留空间 - 用了
border-color: currentColor却没设color，结果三角形变成默认黑色或不可见。解决：显式声明color，或直接写死颜色值 - 在 Retina 屏上边缘发虚——因为
border-width是1px，被设备像素比放大后锯齿明显。解决：用1.5px或2px配合transform: scale(0.5)补偿（但注意缩放会影响定位）
替代方案为什么有时更合适
如果三角形要响应式缩放、带阴影、或需要旋转动画，border 方案很快会绷不住：
-
border无法单独控制三角形的“尖角锐度”，角度完全由边框宽度比例决定，想画一个瘦长三角？只能靠改尺寸+隐藏部分，很别扭 - 加
box-shadow会同时作用于整个假想盒模型，不是只包三角形；加transform: rotate()会让边框像素糊掉 - SVG 或
clip-path: polygon()更可控，比如clip-path: polygon(50% 0%, 0% 100%, 100% 100%)就是标准向下三角，缩放/动画/抗锯齿都原生支持
border 画三角形是个聪明的 hack，但它的边界非常清晰：适合静态、小尺寸、无交互、无动效的装饰性箭头。一旦需求越界，就该换工具了。
