如何为repeating-linear-gradient六边形布局添加额外六边形并居中

一、修复核心问题（居中+溢出） #

1. 让六边形网格居中 #

调整 .main 和 .container 的样式，利用 flex 布局实现网格居中：

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  --s: 100px;
  --m: 4px;
  --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
  width: 100%;
  height: 100vh;
  background-color: purple;
  overflow: hidden; /* 若需完全显示溢出部分，可改为 visible */
}

.container {
  font-size: 0;
}

2. 实现六边形溢出页面效果 #

通过给 .container 设置负边距，让网格向外扩展超出视口范围：

.container {
  font-size: 0;
  margin: calc(-1 * var(--s)) calc(-1 * var(--s)); /* 向外延伸一个六边形的尺寸 */
}

二、JS 动态生成视口适配的六边形 #

编写脚本计算视口所需六边形数量，自动生成元素并支持窗口 resize 适配：

document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.container');
  const root = document.documentElement;
  const hexSize = parseFloat(getComputedStyle(root).getPropertyValue('--s'));
  const margin = parseFloat(getComputedStyle(root).getPropertyValue('--m'));
  const hexWidth = hexSize + 2 * margin;
  const hexRowHeight = (hexSize * 1.1547) + margin - (hexSize * 0.2886);

  function generateHexagons() {
    container.innerHTML = '';
    // 多生成2列2行，确保完全覆盖视口及溢出区域
    const cols = Math.ceil(window.innerWidth / hexWidth) + 2;
    const rows = Math.ceil(window.innerHeight / hexRowHeight) + 2;
    const total = cols * rows;

    for (let i = 0; i < total; i++) {
      const hex = document.createElement('div');
      hex.classList.add('hexagon');
      container.appendChild(hex);
    }
  }

  generateHexagons();
  window.addEventListener('resize', generateHexagons);
});

三、添加六边形交互效果 #

在 CSS 中添加 hover/点击的过渡动画效果：

.container .hexagon {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s) * 1.1547);
  display: inline-block;
  font-size: initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s) * 0.2886);
  background-color: red;
  transition: all 0.3s ease;
  cursor: pointer;
}

.container .hexagon:nth-child(even) {
  background-color: green;
}

.container .hexagon:hover {
  transform: scale(1.05);
  background-color: orange;
}

.container .hexagon:active {
  transform: scale(0.95);
  background-color: darkorange;
}

完整代码整合 #

CSS 文件（main.css） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  --s: 100px;
  --m: 4px;
  --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
  width: 100%;
  height: 100vh;
  background-color: purple;
  overflow: hidden;
}

.container {
  font-size: 0;
  margin: calc(-1 * var(--s)) calc(-1 * var(--s));
}

.container .hexagon {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s) * 1.1547);
  display: inline-block;
  font-size: initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin-bottom: calc(var(--m) - var(--s) * 0.2886);
  background-color: red;
  transition: all 0.3s ease;
  cursor: pointer;
}

.container .hexagon:nth-child(even) {
  background-color: green;
}

.container .hexagon:hover {
  transform: scale(1.05);
  background-color: orange;
}

.container .hexagon:active {
  transform: scale(0.95);
  background-color: darkorange;
}

.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
}

HTML 文件 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>六边形背景</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div class="main">
    <div class="container"></div>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const container = document.querySelector('.container');
      const root = document.documentElement;
      const hexSize = parseFloat(getComputedStyle(root).getPropertyValue('--s'));
      const margin = parseFloat(getComputedStyle(root).getPropertyValue('--m'));
      const hexWidth = hexSize + 2 * margin;
      const hexRowHeight = (hexSize * 1.1547) + margin - (hexSize * 0.2886);

      function generateHexagons() {
        container.innerHTML = '';
        const cols = Math.ceil(window.innerWidth / hexWidth) + 2;
        const rows = Math.ceil(window.innerHeight / hexRowHeight) + 2;
        const total = cols * rows;

        for (let i = 0; i < total; i++) {
          const hex = document.createElement('div');
          hex.classList.add('hexagon');
          container.appendChild(hex);
        }
      }

      generateHexagons();
      window.addEventListener('resize', generateHexagons);
    });
  </script>
</body>
</html>

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