用 <ol> 语义化实现 CSS 箭头步骤条：<li> 表示步骤，::after 用 border 三角形画箭头，flex 布局+last-child 隐藏末尾箭头，通过 step--done/active/disabled 类控制状态与样式，响应式在 768px 切换竖排并改用 border-bottom 箭头。
用 CSS 画箭头步骤条，别用图片或 SVG 组件
纯 CSS 实现最轻量、最易维护。关键不是“怎么画箭头”，而是让每个步骤节点和连接线具备语义和可交互性。用 <ol> 包裹步骤项，既符合语义（有序流程），又天然支持屏幕阅读器和键盘导航。
常见错误是直接用 <div> + 绝对定位硬拼箭头，结果一换字体、一调间距就错位，响应式时更是一团乱。正确做法是让箭头成为步骤项之间的“伪元素连接线”：
- 每个
<li>表示一个步骤，用::after画向右的箭头（或圆角矩形+三角形组合） - 最后一个步骤不渲染箭头，用
:last-child::after { display: none; }控制 - 箭头宽度设为固定值（如
1.5rem），避免随文字缩放变形 - 用
flex布局控制步骤项水平排列，比inline-block更稳，尤其在 Safari 中
箭头样式选 border-triangle 还是 clip-path？
两种主流方案：用 border 拼三角形箭头，或用 clip-path 切出带斜角的连接块。前者兼容性好（IE11 都行），后者更灵活但 iOS Safari 15.4 之前有渲染 bug。
推荐 border 方案，代码简洁、可控性强：
立即学习“前端免费学习笔记（深入）”；
li::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 0.75rem solid transparent;
border-bottom: 0.75rem solid transparent;
border-left: 1.2rem solid #e0e0e0;
margin: 0 0.5rem;
}
注意三点：
-
border-left颜色即箭头色，必须和步骤线颜色一致，否则视觉断裂 - 上下
border的像素值要相等，否则箭头歪斜 - 如果步骤文字换行，
inline-block箭头可能被挤到下一行——此时改用display: flex容器 +align-items: center更可靠
如何高亮当前步骤并禁用后续步骤？
用 class 控制状态比 JS 动态增删更稳妥。约定三个 class：step--done（已完成）、step--active（当前）、step--disabled（未激活）。
重点在交互反馈细节：
-
step--active节点的箭头色要和节点背景色一致，否则像“断开” -
step--disabled不仅文字置灰，其后的箭头也要同步变灰（靠li.step--disabled + li::after选择器） - 禁用状态下的点击区域仍需保留，否则无障碍体验差；用
pointer-events: none仅禁用鼠标，不屏蔽焦点 - 移动端点击热区至少
44px高，文字小的话得给padding补足
响应式断点怎么设才不卡顿？
步骤条在小屏上不能简单堆成竖排——箭头方向要翻转，且连接线要从“横向”变成“纵向”。关键不是媒体查询数量，而是切换时机：
- 在
max-width: 768px切换为竖排（iPad 竖屏临界点） - 箭头方向从
border-left改为border-bottom，同时把::after的margin从左右改为上下 - 竖排时，步骤编号文字建议居中，避免左侧留白过大；可用
text-align: center+line-height对齐 - 慎用
transform: rotate()翻转箭头——动画卡顿、模糊、触发重绘，纯 border 方案无此问题
最常被忽略的是：竖排后，步骤项之间的垂直间距必须大于箭头高度，否则箭头会和下一个步骤的文字重叠。留出至少 2rem 的 margin-bottom。
