如何用CSS实现自定义布局的六边形拼接并填充图片？

这问题我之前也碰到过！你的六边形是靠中间矩形+上下两个伪元素边框拼出来的，三个部分各自独立，所以单独给中间div加背景图自然只能覆盖中间区域。下面给你两种靠谱的解决办法：

方案一：用CSS clip-path（推荐，现代浏览器友好） #

这种方法完全不需要伪元素，直接通过裁剪路径把元素切成六边形，背景图会自动填充整个裁剪后的形状，简单又高效。代码示例：

.hexagon {
  width: 100px;
  height: 105px; /* 对应你原来的总高度：25px（上三角）+55px（中间）+25px（下三角） */
  background: url('你的图片地址') center/cover no-repeat;
  /* 定义六边形的裁剪路径 */
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-block;
  margin: 0.2em;
}

说明：clip-path: polygon() 通过指定六个顶点的坐标，直接把元素裁剪成六边形。现代浏览器（Chrome、Firefox、Edge等）都支持这个属性，唯一的小缺点是旧版IE不兼容，如果你的项目不需要兼容IE，这个方案绝对是首选。

方案二：给伪元素同步设置背景图（兼容旧浏览器） #

如果必须要兼容不支持clip-path的旧浏览器，那可以给上下两个伪元素也设置相同的背景图，然后把伪元素裁剪成三角形，让三个部分的图片完美拼接：

.hexagon {
  /* 用CSS变量统一管理背景图，改的时候只需要动一处 */
  --hex-background: url('你的图片地址');
  
  width: 100px;
  height: 55px;
  background: var(--hex-background) center/cover no-repeat;
  position: relative;
  display: inline-block;
  margin: 0.2em;
}

.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 100px;
  height: 25px;
  border: none; /* 去掉原来的边框 */
  background: var(--hex-background) center/cover no-repeat;
  /* 裁剪成上三角 */
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100px;
  height: 25px;
  border: none; /* 去掉原来的边框 */
  background: var(--hex-background) center/cover no-repeat;
  /* 裁剪成下三角 */
  -webkit-clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

说明：这里把原来的边框伪元素改成了带背景图的三角形容器，通过clip-path裁剪出对应的三角形状，再用CSS变量统一背景图地址，确保三个部分的图片完全对齐，拼接后就是完整的六边形背景。

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