纯CSS箭头形分割线本质是用clip-path在相邻容器上切出错位三角缺口并咬合，实现内容区域真正断开；border三角形仅能做装饰性提示，无法分割语义结构。
纯 CSS 箭头形分割线（比如顶部带下箭头、底部带上箭头的区域分隔）本质不是“画箭头”，而是用 clip-path 切出两个错位拼接的区域，让视觉上形成一个穿透式箭头缺口。直接用 border 三角形或 ::after 叠加，只能做装饰性箭头，无法真正“分割内容区域”。
clip-path 多边形切割实现真正的箭头分割
这是目前唯一能实现“内容区域被箭头形状自然断开”的方案，适用于首页模块之间、卡片堆叠、视差滚动等需要视觉流动感的场景。
-
clip-path: polygon()必须作用在两个相邻容器上：上区底部切掉一个倒三角，下区顶部切掉一个正三角，再用负margin-top把它们咬合 - 四个顶点坐标必须按顺时针顺序书写，例如上区底部缺口：
polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px))—— 最后一个点向上缩进，就形成了右下角的斜切口 - 下区对应要写成：
polygon(0 0, 100% 50px, 100% 100%, 0 100%)，让右上角向下偏移，才能和上区缺口严丝合缝 - 两块之间需用
margin-top: calc(10px - 50px)这类计算值拉近，否则会留白；具体数值取决于你设定的缺口高度（--size）和期望间隙（--gap）
为什么不用 border 三角形做分割线
很多人试过用 ::after 在 hr 或空 div 上叠加三角形，结果发现：它只是浮在上面的图层，底下内容依然连成一片，鼠标滚轮不会停、语义结构没断开、打印时可能错位。
- 这种做法适合“视觉提示”，比如按钮旁的小箭头、菜单激活态指示器，但不是“区域分割”
- 若强行用
position: absolute三角形覆盖分割线，会破坏可访问性（screen reader读不出逻辑断点） - 响应式缩放时，
border三角形尺寸难控制，clip-path的百分比坐标天然适配
兼容性与 fallback 处理
clip-path 在现代浏览器中已稳定支持（Chrome 55+、Firefox 47+、Safari 15.4+），但 iOS Safari 15.2 之前不支持 polygon() 的百分比单位，只认像素值。
- 稳妥写法是用 CSS 变量 +
@supports分层： - 先写基础上下边框：
.section { border-bottom: 1px solid #eee; } - 再用
@supports (clip-path: polygon(0 0)) { ... }包裹clip-path规则，老浏览器自动跳过 - 如需支持 iOS 14，把
calc(100% - 50px)改成calc(100vh - 50px)或固定像素（但会牺牲响应性）
真正难的不是写出箭头形状，而是判断这个“分割”是否承担语义职责——如果它只是装饰，border 三角形够用；如果它标志着内容区块切换、影响滚动锚点或 SEO 结构，clip-path + 相邻容器配合才是正解。别让视觉动效掩盖了 DOM 结构的真实边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
