横向U型步骤条是流程展示场景中常见的组件，相比普通直线型步骤条，它的视觉层次更丰富，能更直观地体现任务的阶段划分。实现该组件的核心是通过CSS布局控制步骤节点的排列，同时用伪元素处理连接线的样式，不需要复杂的JavaScript逻辑。
基础HTML结构搭建
首先我们需要搭建步骤条的基础HTML结构，每个步骤节点包含序号和文字描述，整体用容器包裹：
<div class="u-steps">
<div class="step-item active">
<div class="step-node">1</div>
<div class="step-text">提交申请</div>
</div>
<div class="step-item active">
<div class="step-node">2</div>
<div class="step-text">审核中</div>
</div>
<div class="step-item">
<div class="step-node">3</div>
<div class="step-text">审核通过</div>
</div>
<div class="step-item">
<div class="step-node">4</div>
<div class="step-text">完成</div>
</div>
</div>
核心CSS样式实现
容器与步骤节点布局
使用flex布局让步骤节点横向排列，同时设置相对定位方便后续处理连接线：
.u-steps {
display: flex;
justify-content: space-between;
position: relative;
padding: 20px 0 40px;
max-width: 800px;
margin: 0 auto;
}
.step-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
flex: 1;
}
.step-node {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #e5e5e5;
color: #999;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
z-index: 2;
transition: all 0.3s ease;
}
.step-text {
margin-top: 8px;
font-size: 14px;
color: #999;
white-space: nowrap;
}
U型连接线实现
横向U型步骤条的核心特征是连接线呈U型转折，我们可以通过伪元素为每个步骤节点添加连接线，结合绝对定位实现转折效果：
/* 普通状态连接线 */
.step-item::after {
content: '';
position: absolute;
top: 18px;
left: 50%;
width: 100%;
height: 2px;
background-color: #e5e5e5;
z-index: 1;
transition: all 0.3s ease;
}
/* 最后一个节点不需要右侧连接线 */
.step-item:last-child::after {
display: none;
}
/* 激活状态节点样式 */
.step-item.active .step-node {
background-color: #1677ff;
color: #fff;
}
.step-item.active .step-text {
color: #1677ff;
}
/* 激活状态连接线样式 */
.step-item.active::after {
background-color: #1677ff;
}
/* U型转折处理：给中间两个节点添加垂直连接线 */
.step-item:nth-child(2)::before {
content: '';
position: absolute;
top: 18px;
right: 0;
width: 2px;
height: 30px;
background-color: #e5e5e5;
z-index: 1;
}
.step-item:nth-child(3)::before {
content: '';
position: absolute;
top: 48px;
left: 0;
width: 2px;
height: 30px;
background-color: #e5e5e5;
z-index: 1;
}
/* 激活状态下垂直连接线同步变色 */
.step-item.active:nth-child(2)::before,
.step-item.active:nth-child(3)::before {
background-color: #1677ff;
}
响应式适配调整
为了适配不同屏幕尺寸，我们可以添加媒体查询调整小屏幕下的样式，避免步骤文字换行或布局错乱：
@media screen and (max-width: 768px) {
.u-steps {
padding: 15px 0 30px;
}
.step-node {
width: 28px;
height: 28px;
font-size: 12px;
}
.step-text {
font-size: 12px;
}
.step-item::after {
top: 14px;
}
.step-item:nth-child(2)::before {
top: 14px;
height: 24px;
}
.step-item:nth-child(3)::before {
top: 38px;
height: 24px;
}
}
状态切换逻辑说明
步骤条的状态切换只需要修改对应step-item的active类名即可，比如当任务进行到第三步时，给前三个step-item添加active类，CSS会自动切换节点颜色和连接线颜色，不需要额外编写样式逻辑。
如果需要实现点击切换步骤的交互，可以配合少量JavaScript修改类名：
// 获取所有步骤节点
const stepItems = document.querySelectorAll('.step-item');
// 给每个节点添加点击事件
stepItems.forEach((item, index) => {
item.addEventListener('click', () => {
// 移除所有节点的active类
stepItems.forEach(el => el.classList.remove('active'));
// 给当前点击及之前的节点添加active类
for (let i = 0; i <= index; i++) {
stepItems[i].classList.add('active');
}
});
});
常见问题说明
- 如果步骤数量不是4个，需要调整U型转折的伪元素位置，根据实际节点数量计算垂直连接线的添加节点
- 连接线的颜色、粗细可以通过修改
background-color和height属性自定义 - 步骤节点的形状可以修改
border-radius属性，比如设置为0可以实现方形节点
实现横向U型步骤条的核心是利用flex布局控制横向排列，通过伪元素和绝对定位实现U型连接线，状态区分通过类名切换即可完成，整体实现成本较低，可维护性也比较好。