如何用HTML/CSS/JS实现六边形内的响应式梯形按钮组？

嘿，我来帮你搞定这个需求！其实核心思路是用三层嵌套结构实现六边形容器，再在内部放置适配形状的按钮，同时用相对单位实现响应式。下面一步步来：

核心思路拆解 #

• 六边形实现：通过三层元素嵌套+旋转来实现，外层旋转120°，中间层旋转-60°，内层再旋转0°，这样内层的内容就能正常显示且刚好填满六边形区域
• 按钮适配：两侧按钮用梯形，中间按钮用矩形，让它们组合起来刚好填满六边形的内部空间
• 响应式：用vw、%这类相对单位替代固定像素，让整个组件随屏幕尺寸自动缩放

完整代码实现 #

HTML结构 #

<div class="hex-container">
  <div class="hex-middle">
    <div class="hex-inner">
      <div class="button-list">
        <button class="btn trapezoid-left">按钮1</button>
        <button class="btn rectangle">按钮2</button>
        <button class="btn trapezoid-right">按钮3</button>
        <button class="btn trapezoid-left">按钮4</button>
        <button class="btn rectangle">按钮5</button>
        <button class="btn trapezoid-right">按钮6</button>
      </div>
    </div>
  </div>
</div>

CSS样式 #

/* 六边形容器核心样式 */
.hex-container {
  width: 30vw; /* 用vw实现响应式，可根据需求调整 */
  height: 34.64vw; /* 六边形宽高比是2:√3≈1:1.732，保证形状不变形 */
  overflow: hidden;
  visibility: hidden;
  transform: rotate(120deg);
  margin: 5vw auto;
}

.hex-middle {
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: visible;
  transform: rotate(-60deg);
}

.hex-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: visible;
  transform: rotate(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 按钮列表布局 */
.button-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
}

.btn {
  border: none;
  color: white;
  font-size: 1.2vw;
  cursor: pointer;
  padding: 1vw 0;
}

/* 左侧梯形按钮（基于你提供的代码优化） */
.trapezoid-left {
  width: 30%;
  border-right: 2vw solid transparent;
  border-top: 2.3vw solid #2963BD;
  border-bottom: 2.3vw solid #2963BD;
  border-left: 0;
  text-align: right;
  padding-right: 1vw;
}

/* 右侧梯形按钮 */
.trapezoid-right {
  width: 30%;
  border-left: 2vw solid transparent;
  border-top: 2.3vw solid #2963BD;
  border-bottom: 2.3vw solid #2963BD;
  border-right: 0;
  text-align: left;
  padding-left: 1vw;
}

/* 中间矩形按钮 */
.rectangle {
  width: 32%;
  background-color: #2963BD;
}

/* 小屏幕响应式微调 */
@media (max-width: 768px) {
  .btn {
    font-size: 2vw;
  }
}

关键细节说明 #

• 六边形的宽高比是固定的2:√3，用vw设置宽度后按比例计算高度，能避免形状变形
• 梯形按钮的边框宽度用相对单位vw，保证按钮形状随六边形整体缩放
• flex布局让按钮自动排列在六边形内部，gap属性控制间距，维持美观性
• 三层旋转的嵌套结构是实现六边形的经典方案，既保证了容器形状，又让内部内容保持正常显示方向

这样你就能得到和示例图一致的、响应式的六边形按钮列表啦！

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