结论是：多层border搭配linear-gradient实现复杂进度条属视觉欺骗，依赖overflow隐藏+transform倾斜+角度匹配的渐变，兼容性好但盒模型要求高；clip-path因Safari旧版不支持百分比且动画性能差而被弃用。
直接说结论：用多层 border 搭配 linear-gradient 实现复杂进度条形状，本质是「视觉欺骗」——不是真画出斜角或锯齿，而是靠遮罩、错位和渐变方向控制来模拟。它不依赖 SVG 或 JS，但对盒模型理解要求高，稍有疏漏就会露白边、错位或响应失效。
为什么不用 clip-path 而选多层 border + gradient
因为 clip-path 在 Safari 15.4 之前不支持百分比坐标，且动画性能差；而多层 border 兼容性好（IE11+）、可缩放、能配合 transform 做动态倾斜。关键点在于：border 是盒模型的固有部分，不受 overflow: hidden 影响，但能被父容器裁切——这正是我们做“斜切边缘”的突破口。
- 左侧斜切：给容器加左上/左下
border，再用transform: skewX(-15deg)扭曲整个子元素 - 右侧斜切：同理用
skewX(15deg)，但需注意父子级 transform 顺序 - 真正起作用的是：父容器
overflow: hidden+ 子元素超出部分被裁掉 + 渐变方向对齐斜边
linear-gradient 的角度必须与 skew 匹配
如果用 skewX(-12deg) 做左斜边，那么 background: linear-gradient(102deg, ...) 中的 102° 就不是随便写的——它是 90° + 12°，确保渐变色带垂直于斜边。否则你会看到颜色“滑坡”，像贴歪了的壁纸。
- 斜边向左倾（
skewX(-θ)）→ 渐变角度设为90deg + θ - 斜边向右倾（
skewX(θ)）→ 渐变角度设为90deg - θ - 别用
to top right这类关键字，它们在不同浏览器中解析角度不一致 - 渐变色 stops 必须覆盖整个宽度，否则斜边处会出现色块断裂
圆角 + 斜切共存时，border-radius 必须设在最外层容器
如果你把 border-radius: 8px 加在带 skew 的进度条子元素上，圆角会跟着一起扭曲，变成椭圆弧。正确做法是：圆角只加在外层容器，子元素用 transform 倾斜，再靠 overflow: hidden 把斜边“压”进圆角框里。
- 错误写法：
.progress-inner { border-radius: 8px; transform: skewX(-10deg); }→ 圆角变形 - 正确写法：
.progress { border-radius: 8px; overflow: hidden; } .progress-inner { transform: skewX(-10deg); } - 如果需要内侧圆角（比如斜切后露出的底色边缘），得额外加一层伪元素
::before模拟圆角遮罩
动态更新进度时，别直接改 width，改 background-size
当你要让进度从 20% 走到 80%，如果只改 width: 20% → width: 80%，斜边位置会随宽度变化而偏移，导致“斜切角漂移”。更稳的方式是固定容器宽高，用 background-size 控制渐变重复单元的宽度，并配合 background-position 推动可视区域。
- 示例：
background: linear-gradient(102deg, #4a9eff, #4a9eff 50%, #c0e0ff 50%, #c0e0ff); background-size: 200% 100%; background-position: 0 0; - 进度 0% →
background-position: 0 0；进度 100% →background-position: -100% 0 - 这样斜边始终对齐，且动画更顺滑（GPU 加速）
最易忽略的一点：所有涉及 transform 和 overflow 的嵌套，必须确认父容器没有 will-change: transform 或 backface-visibility: hidden，否则某些安卓 WebView 会强制重绘整层，导致斜边闪烁。实测中，去掉这两项后，斜切进度条在低端机上也能稳定渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
