如何使用CSS/HTML/JS生成三角形/金字塔排列的可独立操作六边形？

完全可以通过纯CSS/HTML/JS实现你的需求，无需依赖第三方库，所有六边形都是独立DOM元素，完全支持单独修改样式、绑定动画、添加交互事件，也支持根据用户输入动态调整行数。

• 单个六边形生成：使用CSS clip-path 属性绘制正六边形，每个六边形都是独立的<div>元素，可自定义data-row、data-col属性方便后续定位控制
• 错位排列逻辑：奇数行整体向右偏移半个六边形宽度，行与行之间设置负边距消除上下间隙，即可实现你需要的交错排列效果
• 动态生成逻辑：JS监听用户输入的行数数值，循环创建对应行和每行的六边形元素插入容器即可，现有元素可直接操作增删无需重绘整个网格

HTML 结构 #

<!-- 行数输入框 -->
<input type="number" id="rowInput" min="1" placeholder="请输入要生成的行数">
<!-- 六边形容器 -->
<div class="hex-container"></div>

CSS 样式 #

.hex-container {
  padding: 40px;
}
.hex-row {
  line-height: 0;
  /* 消除上下行垂直间隙 */
  margin-bottom: -17px;
}
/* 奇数行右移半个六边形宽度实现错位 */
.hex-row:nth-child(odd) {
  margin-left: 33px;
}
.hex {
  /* 正六边形宽高比固定为1:1.1547 */
  width: 60px;
  height: 69px;
  margin: 0 3px;
  background: #42a5f5;
  display: inline-block;
  /* 裁剪为正六边形 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* 示例动画，可单独为每个六边形自定义 */
  transition: all 0.3s ease;
  cursor: pointer;
}
/* 示例单独交互效果，你可以自定义任意动画 */
.hex:hover {
  transform: scale(1.15);
  background: #ef4444;
}

JS 逻辑 #

const rowInput = document.getElementById('rowInput');
const hexContainer = document.querySelector('.hex-container');
// 每行生成的六边形数量，可根据需求调整
const PER_ROW_COUNT = 10;

rowInput.addEventListener('input', (e) => {
  const targetRowCount = parseInt(e.target.value) || 0;
  // 清空现有网格
  hexContainer.innerHTML = '';
  // 生成对应行数的网格
  for (let rowIndex = 0; rowIndex < targetRowCount; rowIndex++) {
    const rowEl = document.createElement('div');
    rowEl.className = 'hex-row';
    // 生成每行的六边形
    for (let colIndex = 0; colIndex < PER_ROW_COUNT; colIndex++) {
      const hexEl = document.createElement('div');
      hexEl.className = 'hex';
      // 存储行列坐标，方便后续单独控制指定六边形
      hexEl.dataset.row = rowIndex;
      hexEl.dataset.col = colIndex;
      // 可在此处为单个六边形绑定事件、添加自定义动画类
      rowEl.appendChild(hexEl);
    }
    hexContainer.appendChild(rowEl);
  }
});

• 若你需要生成超大量六边形（数千个及以上），可使用Canvas实现，将每个六边形的坐标、样式数据存储在独立数组中，同样支持单独控制每个元素的渲染效果和动画
• 若你的项目是游戏类场景，也可以使用Godot引擎开发，内置的TileMap模块原生支持六边形网格排布，每个格子可独立配置样式和交互逻辑

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