本文详解如何基于 repeating-linear-gradient 与 shape-outside 构建真正居中、无缝拼接且视觉上“溢出画布”的响应式六边形背景，通过 position: fixed 和负 inset 精准控制布局范围，并兼容动态 JS 渲染交互。
本文详解如何基于 `repeating-linear-gradient` 与 `shape-outside` 构建真正居中、无缝拼接且视觉上“溢出画布”的响应式六边形背景，通过 `position: fixed` 和负 inset 精准控制布局范围，并兼容动态 js 渲染交互。
要实现如图所示的居中六边形网格背景（hexagon grid background），并让六边形自然“溢出”视口边缘以增强视觉张力，关键不在于增加更多
元素，而在于重新定义容器的定位与空间范围。原始方案使用 flex 布局配合 shape-outside 实现错位排列，但默认会紧贴视口左上角，既不居中也无法溢出。
✅ 核心解决方案：position: fixed + 负 inset
将 .main 设置为 position: fixed，并用 inset: calc(-1 * var(--s)) 向外扩展容器边界——即在上下左右各延伸一个六边形边长（--s）的距离。这样，六边形网格的实际绘制区域远大于视口，自然产生“溢出”效果；同时因 fixed 定位默认居中于视口（配合 width/height: 100%），整个图案自动水平垂直居中：
.main {
position: fixed;
inset: calc(-1 * var(--s)); /* 关键：向四边各扩展 --s 距离 */
display: flex;
--s: 100px; /* 六边形边长 */
--m: 4px; /* 六边形间距 */
--f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px); /* 六边形垂直周期（≈ √3 × s + 4m） */
width: 100vw;
height: 100vh;
margin: 0;
z-index: -1; /* 确保作为背景，不遮挡内容 */
}
? inset: calc(-1 * var(--s)) 等价于 top: -100px; right: -100px; bottom: -100px; left: -100px，是现代 CSS 中更简洁的写法。
? 保持原有六边形结构逻辑
.container 及其子
的样式无需改动，继续利用 clip-path 绘制单个六边形，并通过 shape-outside 在伪元素 ::before 上生成错位流体布局：
.container {
font-size: 0;
}
.container div {
width: var(--s);
height: calc(var(--s) * 1.1547); /* ≈ s × 2/√3，六边形高度 */
margin: var(--m);
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;
}
.container div:nth-child(even) {
background-color: green;
}
.container::before {
content: "";
float: left;
width: calc(var(--s)/2 + var(--m)); /* 左侧浮动列宽度，驱动奇偶行偏移 */
height: 100%;
shape-outside: repeating-linear-gradient(
transparent 0 calc(var(--f) - 3px),
#000 0 var(--f)
);
}
⚠️ 注意事项与最佳实践
- 重置 body margin：务必添加 body { margin: 0; }，避免默认外边距干扰 fixed 定位。
- z-index 控制层级：将 .main 设为 z-index: -1，确保它作为底层背景，不阻挡页面内容或交互元素。
-
JS 动态渲染建议：若需根据视口尺寸动态生成六边形数量，可计算可视区域所需列数与行数：
const s = 100, m = 4, f = s * 1.732 + 4 * m - 1; const cols = Math.ceil(window.innerWidth / (s + 2 * m)) + 2; // +2 预留溢出缓冲 const rows = Math.ceil(window.innerHeight / f) + 4; const total = cols * rows;
再批量插入
即可——注意 DOM 数量不宜过多（建议 ≤ 200），否则影响性能。- 响应式增强：可结合 @media 或 CSS clamp() 动态调整 --s，例如 --s: clamp(40px, 4vw, 120px);，实现真正流体缩放。
通过这一方案，你获得的不再是一个“刚好填满视口”的六边形阵列，而是一个无限延展、视觉居中、边缘自然溢出的动态背景基底——为后续悬停反馈、点击高亮、动画联动等交互功能打下坚实基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
