如何实现纯CSS六边形背景？现有三角形方案存在问题求优化

当然有纯CSS的可行方案，不用退而求其次使用图片背景！针对你遇到的两个问题，我整理了一个更精准的实现思路，完美解决线条偏移和内部多余线条的问题：

核心思路：利用六边形几何特性优化渐变组合 #

正六边形的几何特性是关键——它的对边平行，内角为120°，我们可以用两个不同角度的重复线性渐变配合精确的背景尺寸与定位，拼接出无内部线条的六边形网格，同时避免背景尺寸影响线条位置。

边框式六边形网格（解决你的原问题） #

:root {
  /* 可自定义参数 */
  --hex-side: 50px;          /* 六边形边长 */
  --hex-border-width: 3px;    /* 边框宽度 */
  --hex-border-color: rgba(0, 85, 130, 0.5); /* 边框颜色 */
  --hex-bg: #fffcfc;          /* 背景底色 */
  
  /* 自动计算的几何参数 */
  --hex-width: calc(var(--hex-side) * 1.732); /* 六边形宽度（√3 × 边长） */
  --hex-v-repeat: calc(var(--hex-side) * 1.5); /* 垂直方向重复间隔 */
}

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

body {
  min-height: 100vh;
  background: 
    /* 第一组渐变：60°方向，负责六边形的一组对边 */
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent calc(var(--hex-side) - var(--hex-border-width)),
      var(--hex-border-color) calc(var(--hex-side) - var(--hex-border-width)),
      var(--hex-border-color) var(--hex-side)
    ),
    /* 第二组渐变：-60°方向，负责另一组对边，偏移半个宽度实现交错排列 */
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent calc(var(--hex-side) - var(--hex-border-width)),
      var(--hex-border-color) calc(var(--hex-side) - var(--hex-border-width)),
      var(--hex-border-color) var(--hex-side)
    ),
    var(--hex-bg);
  
  /* 基于几何计算的背景尺寸，确保重复对齐 */
  background-size: var(--hex-width) calc(var(--hex-v-repeat) * 2);
  background-position: 0 0, calc(var(--hex-width) / 2) 0;
  background-attachment: fixed;
}

解决你的两个问题： #

1. 背景尺寸影响线条位置：
   这里的background-size完全基于六边形的几何比例计算，和容器尺寸无关。无论容器多大，渐变都会按照固定的重复单元无缝平铺，线条位置永远不会偏移。你还可以通过修改--hex-side变量轻松调整六边形大小，所有参数会自动适配。

2. 内部多余线条：
   原方案用了三个渐变导致内部线条重叠，而这个方案仅用两组渐变，分别负责六边形的两组对边。通过精确控制渐变的停止位置，以及背景位置的偏移，两组渐变的线条刚好拼接成完整的六边形轮廓，内部不会出现交叉重叠的线条。

扩展：填充式六边形网格 #

如果需要实现填充的六边形背景（而非边框），只需调整渐变的颜色顺序即可：

:root {
  --hex-side: 50px;
  --hex-fill-color: rgba(0, 85, 130, 0.2);
  --hex-bg: #fffcfc;
  --hex-width: calc(var(--hex-side) * 1.732);
  --hex-v-repeat: calc(var(--hex-side) * 1.5);
}

body {
  min-height: 100vh;
  background: 
    repeating-linear-gradient(
      60deg,
      var(--hex-fill-color),
      var(--hex-fill-color) var(--hex-side),
      transparent var(--hex-side),
      transparent calc(var(--hex-side) * 2)
    ),
    repeating-linear-gradient(
      -60deg,
      var(--hex-fill-color),
      var(--hex-fill-color) var(--hex-side),
      transparent var(--hex-side),
      transparent calc(var(--hex-side) * 2)
    ),
    var(--hex-bg);
  
  background-size: var(--hex-width) calc(var(--hex-v-repeat) * 2);
  background-position: 0 0, calc(var(--hex-width) / 2) 0;
}

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