当前位置：首页 > CSS

css制作流程图

2026-04-01 00:37:47CSS

使用CSS制作流程图的方法

利用Flexbox布局

Flexbox可以轻松实现水平或垂直排列的流程图节点。通过设置display: flex和flex-direction控制方向，结合伪元素添加连接线。

.flowchart {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.node {
  width: 120px;
  height: 60px;
  background: #4CAF50;
  position: relative;
}
.node::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  border: 8px solid transparent;
  border-top-color: #4CAF50;
}

使用Grid布局

CSS Grid适合更复杂的流程图结构。通过定义网格区域实现多分支流程。

css制作流程图

.flowchart {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
.node {
  grid-area: span 1 / span 1;
  background: #2196F3;
}

伪元素连接线

通过::before或::after伪元素创建节点间的连接线，配合绝对定位控制线条位置。

.node {
  position: relative;
}
.node::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 20px;
  background: #333;
}

使用CSS Shapes

结合clip-path创建非矩形节点，适合特殊形状的流程图元素。

css制作流程图

.diamond {
  width: 80px;
  height: 80px;
  background: #FF9800;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

动画效果

添加过渡或动画增强交互体验，如悬停高亮或点击反馈。

.node {
  transition: transform 0.3s;
}
.node:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

响应式处理

通过媒体查询调整流程图在不同屏幕尺寸下的显示方式。

@media (max-width: 768px) {
  .flowchart {
    flex-direction: column;
  }
  .node::after {
    border-left-color: #4CAF50;
    border-top: none;
    left: -15px;
    top: 50%;
  }
}