CSS实现圆角六边形连接布局及响应式适配方案咨询

现有代码的核心问题：

• 全部使用固定px值+绝对定位硬编码元素坐标，完全无法自适应屏幕宽度
• 采用三个旋转矩形拼接六边形的实现方案，容易出现拼接缝隙、边框渲染异常，层级控制复杂度高
• 连接条宽度、位置全部写死，无法适配六边形数量变化、间距调整和屏幕尺寸变化

优化实现思路 #

• 六边形统一使用clip-path: polygon()实现，单标签即可完成渲染，无多元素拼接的错位问题
• 整体采用Flex弹性布局排列六边形，节点间连接条通过相邻元素的伪元素自动填充，无需手动计算宽度
• 尺寸单位使用相对单位搭配clamp()、视口单位，配合媒体查询即可实现全尺寸响应式适配
• 内描边、文字直接内嵌在六边形标签内，无需多层伪元素嵌套，结构更简洁

完整可运行代码 #

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vw;
}
.hex-container {
  display: flex;
  align-items: center;
  gap: 4vw;
  width: 100%;
  max-width: 1200px;
  position: relative;
}
/* 六边形基础样式 */
.hex {
  aspect-ratio: 1 / 1.1547; /* 正六边形固定宽高比 */
  width: 18%;
  background: #2ecc71;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 六边形内白边 */
.hex::after {
  content: '';
  position: absolute;
  inset: 8%;
  background: #2ecc71;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
/* 节点间灰色连接条 */
.hex:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: calc(4vw + 1px);
  height: 50%;
  background: #888;
  z-index: -1;
}
/* 节点文字 */
.hex-text {
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 2vw, 1.8rem);
  color: #000;
  font-family: sans-serif;
  font-weight: bold;
}

/* 小屏幕响应式适配：竖向排列 */
@media (max-width: 768px) {
  .hex-container {
    flex-direction: column;
    gap: 6vh;
  }
  .hex {
    width: 40%;
  }
  .hex:not(:last-child)::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 50%;
    height: calc(6vh + 1px);
  }
}

HTML 结构 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>六边形流程组件</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="hex-container">
    <div class="hex">
      <span class="hex-text">节点1</span>
    </div>
    <div class="hex">
      <span class="hex-text">节点2</span>
    </div>
    <div class="hex">
      <span class="hex-text">节点3</span>
    </div>
    <!-- 可任意增减六边形节点，连接条会自动适配位置和长度 -->
  </div>
</body>
</html>

实现效果说明 #

• 完全支持响应式：桌面端横向排列，屏幕宽度小于768px时自动切换为竖向排列，所有元素尺寸随屏幕大小自动缩放
• 可维护性强：无需硬编码任何位置坐标，新增、删除六边形节点时连接条会自动生成，不需要额外修改样式
• 渲染稳定：clip-path生成的六边形不存在旋转拼接带来的缝隙、边框错位问题
• 层级逻辑清晰：连接条自动置于六边形下层，不会出现元素遮挡问题

内容的提问来源于stack exchange，提问作者J09