核心是宽高为0，三边透明、一边有色，利用border交界斜角形成三角形；方向由有色边决定（如向下用border-top-color），须设content:""和display:block，并给父元素加position:relative以精确定位。
::before 伪元素画三角形，核心就一条：宽高为 0，靠 border 的斜角视觉错觉“拼”出来。不依赖 clip-path 或 transform，兼容性好到 IE8 都能跑。
怎么用 border-width 和 border-color 控制方向
方向由哪条边有颜色、哪几条边透明决定，不是靠 border-top 就一定向上——关键看三边透明、一边有色时，有色边和相邻透明边交汇形成的尖角朝哪。
- 向下三角形：
border-top-color: #000，其余三边transparent；border-top-width决定高度，左右border-left/right-width决定底边宽度 - 向右三角形：
border-left-color: #000，其余透明；底边实际是左边界，宽度由border-left-width控制，上下border-top/bottom-width控制高度 - 口诀记法：箭头指向哪，就把对应反方向的 border 设成实色（如箭头向下 → 用
border-top；箭头向右 → 用border-left）
为什么必须设 content: "" 和 display: block
::before 默认是 display: inline，而 border 在内联元素上不渲染（或行为异常）。不写 content: ""，伪元素根本不会生成。
- 缺
content→ 伪元素不创建，样式无效 - 不设
display: block或inline-block→ 宽高0+border可能塌陷或错位 - 推荐写法：
content: ""+display: block（或inline-block，视布局需要）
常见翻车点：定位偏移和像素缝隙
伪元素默认插入在父元素内容流中，不加定位会撑开布局；加了 position: absolute 后，若父元素没设 position: relative，它会相对于最近定位祖先，常导致飘走。
立即学习“前端免费学习笔记（深入）”；
- 必须给父容器加
position: relative，否则top/left无参照 - 三角形边缘出现 1px 白边或模糊？大概率是
border-color没对齐背景色，或用了 subpixel 定位（比如left: 50%+margin-left: -20.5px） - 解决缝隙：统一用整数
border-width，top/left也取整，必要时加transform: translateZ(0)强制硬件加速防抗锯齿
真正难的不是画出三角形，而是让它在不同缩放、不同背景、不同父容器尺寸下都严丝合缝——这时候 border 技巧的确定性反而比 clip-path 更可靠，但代价是每个方向都要手算四个 border-* 值。
