用 CSS Grid + clip-path 实现无缝箭头进度条：每个步骤用 polygon() 切出45°斜边自然咬合，Grid 控制响应式布局，预设状态样式避免重排，IE11 降级为内联 SVG 背景。
用 CSS Grid + clip-path 实现箭头无缝连接
纯 CSS 做多步骤进度条时，最常卡在「箭头尖角处断开」或「缩放后错位」——本质是边框和背景无法自然拼接。用 clip-path 切出带斜角的步骤块，再用 grid 控制布局，能彻底避开 border/padding 干扰。
关键不是画箭头，而是让每个步骤块自己「长出箭头」：左侧步骤的右边缘、右侧步骤的左边缘，都用 clip-path: polygon() 切成 45° 斜边，视觉上自然咬合。
-
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%)是基础右斜切（用于当前步骤） - 下一个步骤要用
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%)补齐左斜边 - 必须给所有步骤设相同高度和
box-sizing: border-box，否则calc()偏移失效 - 别用
transform: scale()缩放整个进度条——clip-path的像素值不会同步缩放，箭头立刻撕裂
响应式宽度靠 minmax() + flex-basis 而非固定 px
写死 width: 200px 在手机上必然溢出；但全用 % 又会让小屏步骤挤成一条线。真正可控的方式是用 Grid 的 minmax() 配合 Flex 的 flex-basis 双保险。
- 父容器设
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，保证单步最小 120px，多步自动均分 - 每个步骤内部用
display: flex，图标容器设flex: 0 0 auto，文字区域设flex: 1 1 0，避免文字撑宽箭头区 - 禁用
white-space: nowrap—— 它会让文字强行撑开步骤块，破坏minmax()计算 - 媒体查询只调
minmax()的最小值，比如@media (max-width: 480px) { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))，不碰其他规则
active 状态切换时避免重排（reflow）
点击下一步时，如果靠 JS 动态增删 class 改变 background-color 或 width，浏览器会触发 layout，尤其在低端安卓机上明显卡顿。真正的轻量方案是预设所有状态样式，只切 opacity 和 z-index。
立即学习“前端免费学习笔记（深入）”；
- 所有步骤默认用
opacity: 0.6，激活步骤加opacity: 1，不改 background 或尺寸 - 用
z-index控制「已完成」图标的叠层顺序，而不是用display: block/none显隐 - 禁止在 :active 里写
transform: translateX()—— 它会强制创建新图层，内存占用翻倍 - 如果需高亮边框，用
outline替代border，outline 不参与盒模型计算
IE11 兼容要砍掉 clip-path 改用 SVG 背景
IE11 不支持 clip-path（哪怕带 -ms- 前缀也无效），强行降级会整条进度条变方块。稳妥做法是检测支持性，用 inline SVG 当背景图兜底。
- 用
@supports (clip-path: polygon())包裹原生 CSS 方案，IE11 自动跳过 - 兜底 SVG 必须内联：
background-image: url("data:image/svg+xml;utf8,<svg>...<polygon points="0,0 100,0 80,20 0,20"></polygon></svg>")，不能引用外部文件（CORS 问题） - SVG 中的
polygonpoints 值要和 CSS 的clip-path严格对应，否则箭头角度错位 - 别用
background-size: contain—— IE11 里它会让 SVG 拉伸变形，改用100% 100%并确保 SVG viewBox 精确匹配容器宽高比
最麻烦的其实是字体度量差异：不同系统下 em 计算出的 clip-path 偏移值会漂移几像素，建议所有位置计算统一用 px，哪怕牺牲一点缩放灵活性。
