如何为带clip-path的透明六边形div添加深色边框？

针对你遇到的问题，不用折腾SVG或者兼容性差的滤镜，调整下::after伪元素的写法就能搞定，而且主流浏览器（包括Firefox）都兼容。

修改后的完整CSS代码如下：

.hexagon {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(32,78,64,0.25);
  z-index: 20;
  -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  left: 40px;
  top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon::after {
  content: "";
  position: absolute;
  /* 向外扩展2px作为边框宽度，数值可按需调整 */
  inset: -2px;
  /* 边框颜色，这里设为黑色 */
  background-color: black;
  /* 继承父元素的裁剪路径，保证形状完全一致 */
  -webkit-clip-path: inherit;
  clip-path: inherit;
  /* 放在父元素下方，避免遮挡内部内容 */
  z-index: -1;
}

原理说明： #

1. inset: -2px让伪元素的尺寸比父元素大2px，四个方向向外延伸，刚好形成边框的宽度
2. 伪元素继承父元素的clip-path，所以形状和六边形完全匹配，不会出现矩形边框的问题
3. 把伪元素的z-index设为-1，放在父元素下面，父元素的半透明背景会覆盖中间区域，只露出外围的边框部分
4. 这种方法不需要依赖滤镜，兼容性好，而且父元素的尺寸、位置变化时，伪元素会自动跟着适配

如果要调整边框宽度，直接修改inset的数值就行（比如-3px就是3px宽的边框），边框颜色改background-color即可。

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