border三角形不是“画出来”的，是“漏出来的”：当width和height均为0时，四条边框在中心交汇形成等腰直角三角形区域，仅保留一条有色边框、其余设transparent，即可“漏”出指向该边对边的清晰三角形。
border三角形不是“画出来”的，是“漏出来的”
浏览器渲染边框时，四条边在元素盒模型的四个角交汇，形成斜接。当 width 和 height 都为 0，且三边设为 transparent、仅一边有实色时，视觉上只剩一个由该有色边框与相邻透明边框交汇“挤出”的等腰直角三角形——它本质是边框交界处的斜角区域被“暴露”了。
这不是 hack，是 CSS 规范定义的边框绘制行为。关键点在于：
-
width: 0和height: 0必须同时存在，缺一不可 - 四条边框必须都声明宽度（哪怕为
0），否则交界不成立 - 不能用
border: none或border-left: 0清空某边——那会直接删掉该边框，破坏交汇结构 - 必须用
transparent，而非rgba(0,0,0,0)：旧版 Safari 对后者兼容性差，可能渲染出灰色残影
方向怎么控制？记住“有色边框的对边就是三角形指向”
三角形朝向由哪条边框有颜色、其余三条透明共同决定。口诀简单粗暴：三角形指向的是“有色边框的对边”。比如 border-bottom 是红色，三角形就指向上；border-right 是红色，三角形就指向左。
标准写法（以 10px 大小为例）：
立即学习“前端免费学习笔记（深入）”；
- 向上：
border-left: 10px solid transparent;、border-right: 10px solid transparent;、border-bottom: 10px solid #333; - 向下：
border-left: 10px solid transparent;、border-right: 10px solid transparent;、border-top: 10px solid #333; - 向左：
border-top: 10px solid transparent;、border-bottom: 10px solid transparent;、border-right: 10px solid #333; - 向右：
border-top: 10px solid transparent;、border-bottom: 10px solid transparent;、border-left: 10px solid #333;
常见翻车点：
- 写成
border: 10px solid transparent; border-bottom: 10px solid #333;—— 这样border-bottom会继承solid和transparent，实际没生效 - 左右/上下边框宽度不一致，比如
border-left: 8px、border-right: 12px，三角形会歪斜或变钝角
想加边框或圆角？border法本身做不到
纯 border 三角形是一个“无内容、无背景、仅靠边框交界呈现”的视觉块，它没有内边距、没有背景层、也没有可独立设置的外轮廓。所以：
- 无法直接给三角形加
border：它自己就是边框，再套边框等于叠两层边框，得用双层元素模拟 - 无法直接加
border-radius：圆角作用于盒模型四个角，而这个盒子宽高为0，没有角可圆 - 无法加
box-shadow：阴影基于盒模型投影，0×0元素几乎不产生有效阴影（部分浏览器会渲染极细线）
如果真需要描边，通用做法是用两个绝对定位的同向三角形叠加：外层稍大、颜色为描边色；内层略小、颜色为主色，top/left 偏移量取两者 border-width 差值的一半。
什么时候该换 clip-path 或 SVG？
border 法只适合等腰直角三角形，且方向受限。遇到这些情况，就得切换方案：
- 要正三角形（顶点朝上，底角 60°）：
clip-path: polygon(50% 0%, 0% 100%, 100% 100%)更直观，但 IE 不支持，iOS Safari 15.4+ 才稳定 - 要响应式缩放且保持形状不变：SVG 的
<path>或<polygon>更可靠，还能加aria-label - 要动画旋转三角形并保持尖角居中：border 法旋转后尖角会偏移，SVG 或
transform: rotate()+transform-origin控制更准 - 要带圆角的三角形：必须用
clip-path切出三角，再配合border-radius（仅对部分圆角生效），或直接用 SVG<path>描点加圆角
真正容易被忽略的是：border 法看似简单，但一旦需要微调角度、适配高 DPI 屏幕、或和 flex/grid 容器对齐，它的像素级精度反而比 clip-path 更难控制——因为它的大小完全依赖整数 border-width，没法做 sub-pixel 调节。
