border法能画出三角形，是因为宽高为0时四条边框从中心点外延交汇形成等腰直角三角形区域，仅保留一条有色边框、其余设transparent，即可“漏”出指向该边对边的清晰三角形。
纯 CSS 制作三角形图标，border + 透明边框是最稳定、兼容性最好、语义最轻量的方案。它不依赖 clip-path（IE/旧 Safari 不支持）或 linear-gradient（调试复杂、角度易偏），只要浏览器支持基础边框，就能渲染准确。
为什么 border 法能画出三角形
当一个元素的 width 和 height 都为 0 时，四条边框不再“包裹内容”，而是从同一个中心点向外延伸。每条边框在交汇处自然形成一个等腰直角三角形区域——你只保留其中一条边框有颜色、其余设为 transparent，视觉上就只剩下一个尖锐的三角形。
关键不是“画”出来，而是“漏”出来：透明边框撑开空间，有色边框定义方向和大小。
-
border-width值直接决定三角形底边长度和高度（等腰直角时，高 = 底边 / 2） - 必须保证所有边框宽度一致，否则三角形会拉斜或错位
- 不能只写
border: 10px solid red再单独覆盖某边透明——那样会继承颜色，得用border-color显式声明四值顺序
四个方向的标准写法与常见翻车点
方向由“哪条边框有色”和“哪三条边框透明”共同决定。记住口诀：三角形指向的方向，是“有色边框的对边”。比如下边框有色 → 指向上；右边框有色 → 指向左。
立即学习“前端免费学习笔记（深入）”；
标准写法（以 20px 大小为例）：
- 向上：
border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #333; - 向下：
border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #333; - 向左：
border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #333; - 向右：
border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #333;
容易踩的坑：
- 写成
border: 20px solid transparent后再单独border-bottom-color: red—— 这会导致左右边框也带红色描边（因为border简写会重置所有边颜色） - 上下/左右边框宽度不等（如
border-left: 15px,border-right: 20px）→ 三角形歪斜、顶点偏移 - 父容器设置了
overflow: hidden，而三角形用position: absolute偏移出界 → 被裁剪（需检查定位上下文）
加边框、改颜色、适配高对比度模式
纯色三角形本身没法直接加描边（border 已被用于生成形状），但有几种可靠解法：
- 用伪元素双层叠加：一层做底色三角形，一层稍缩放后做描边色，例如
@layer或::before/::after分别控制 - 改用
clip-path: polygon(...)，可自由加outline或stroke（但 IE 完全不支持） - 在高对比度模式下（Windows HC / macOS Dark Contrast），
transparent可能被强制渲染为黑色或白色，导致三角形“消失”或变粗。稳妥做法是避免依赖transparent，改用系统色如CanvasText或ButtonFace作为“背景色”替代
例如适配高对比度的向上三角形：
.triangle-up-hc {
width: 0;
height: 0;
border-left: 20px solid CanvasText;
border-right: 20px solid CanvasText;
border-bottom: 20px solid #333;
}
什么时候不该用 border 法
border 法本质是等腰直角三角形，它不适合以下场景：
- 需要锐角 90° 的三角形（比如箭头特别细长）→ 改用
clip-path: polygon(0 0, 100% 50%, 0 100%) - 需要抗锯齿边缘（border 法在低分辨率屏上边缘易发虚）→
transform: scale(1.5)后回缩可缓解，或切 SVG - 需要响应式缩放（border 宽度是固定 px，无法随字体缩放）→ 可用
em单位（如border-bottom: 1em solid），但需确保父元素font-size可控
真正难的不是画出来，而是让三角形在各种缩放、对比度、DPR 下都保持清晰、对齐、不破型——border 法赢在简单，但也止于简单。一旦需求超出等腰直角范畴，就得换工具。
