带半透明背景与边框的六边形CSS实现问题

嘿，这个坑我之前踩过！你的六边形是通过主<div>加上:before/:after伪元素拼接出来的对吧？当给主元素设置半透明rgba背景后，伪元素和主div的重叠区域会出现透明度叠加的问题——两个0.7透明度的层叠在一起，实际透明度会变成0.7 + 0.7*(1-0.7) = 0.91，视觉上就比其他区域暗，导致整个六边形的透明度不均匀。

先把你没写完的伪元素代码补全（还原常见的六边形实现方式）：

.hexagon {
  position: relative;
  width: 290px;
  height: 173.21px; /* 宽度 × √3/2，标准六边形对边距计算 */
  margin: 86.60px 0;
  border-left: solid 5px #333333;
  border-right: solid 5px #333333;
  background-color: rgba(102, 204, 34, 0.7); /* 修正你原来的rgb写法，应该用rgba */
}
.hexagon:before, .hexagon:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-left: inherit;
  border-right: inherit;
  background-color: inherit;
  top: 0;
  left: 0;
}
.hexagon:before {
  transform: rotate(60deg);
}
.hexagon:after {
  transform: rotate(-60deg);
}

解决方案：推荐用clip-path替代伪元素方案 #

这是最简洁且无重叠问题的方法，直接把div裁剪成六边形形状，整个元素是一个完整的区域，半透明背景自然均匀：

.hexagon {
  position: relative;
  width: 290px;
  height: 173.21px;
  margin: 86.60px 0;
  border-left: solid 5px #333333;
  border-right: solid 5px #333333;
  background-color: rgba(102, 204, 34, 0.7);
  /* 用clip-path直接裁剪出六边形 */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* 完全不需要伪元素了！ */

clip-path的兼容性目前已经很好（除了IE浏览器，如果你不需要兼容IE的话，这绝对是最优解）。

如果你一定要保留伪元素方案 #

那就要避免伪元素和主元素的背景重叠，让伪元素只负责边框，背景色只放在主元素上：

.hexagon {
  position: relative;
  width: 290px;
  height: 173.21px;
  margin: 86.60px 0;
  background-color: rgba(102, 204, 34, 0.7);
  border-left: 5px solid #333;
  border-right: 5px solid #333;
}
.hexagon:before, .hexagon:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  /* 伪元素背景设为透明，只保留边框 */
  background-color: transparent;
  border-left: inherit;
  border-right: inherit;
  top: 0;
  left: 0;
}
.hexagon:before {
  transform: rotate(60deg);
}
.hexagon:after {
  transform: rotate(-60deg);
}

不过这种方式还是会有边框重叠的小问题，不如clip-path来得干净利落。

内容的提问来源于stack exchange，提问作者Zbyszek Kisły