用CSS创建数据流程图的核心思路是把每个流程节点放进Grid容器里统一排布，然后借助节点的before或after伪元素画出指向其他节点的连线。这种方式不需要JavaScript绘图库，也不依赖SVG，非常适合静态展示类的业务流向说明。
一、整体布局结构
我们先定义一个容器，使用display:grid来规划节点位置。下面以横向三列流程图为例，每个格子放一个节点。
<div class="flow"> <div class="node">开始</div> <div class="node">处理</div> <div class="node">结束</div> </div>
二、Grid容器样式
通过grid-template-columns控制列数，gap留出节点间距，后续连线就画在间距区域中。
.flow {
display: grid;
grid-template-columns: repeat(3, 120px);
gap: 60px 80px;
align-items: center;
justify-content: center;
padding: 40px;
}
.node {
position: relative;
height: 50px;
line-height: 50px;
text-align: center;
background: #e8f0fe;
border: 1px solid #4285f4;
border-radius: 6px;
}
三、用伪元素画连接线
横向流程中，除了最后一个节点，其余节点可用after伪元素在右侧画出一条横线，表示数据流向。
.node:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 80px;
height: 2px;
background: #4285f4;
transform: translateY(-50%);
}
1、纵向流程图的做法
若改为纵向排列，只需把grid改成单行多列之外的写法，并让伪元素出现在节点下方。
.flow-vertical {
display: grid;
grid-template-rows: repeat(3, 60px);
gap: 50px;
justify-items: center;
}
.flow-vertical .node:not(:last-child)::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 2px;
height: 50px;
background: #34a853;
transform: translateX(-50%);
}
2、带箭头的连接
可以用border给伪元素拼出箭头，或者叠加一个before伪元素做三角。
.node:not(:last-child)::before {
content: "";
position: absolute;
top: 50%;
left: calc(100% + 74px);
border: 6px solid transparent;
border-left-color: #4285f4;
transform: translateY(-50%);
}
四、状态高亮示例
通过给节点加类，可以改变连线颜色，表现当前流程进展。
.node.active {
background: #fde7e9;
border-color: #ea4335;
}
.node.active::after {
background: #ea4335;
}
五、小结
使用CSS Grid负责节点排布，伪元素负责连线绘制，就能用纯样式完成基础数据流程图。如需复杂分支，可结合grid-area定位或嵌套grid容器继续扩展。