如何使div与::after伪元素同色且避免颜色混合？

你当前的问题是：.box容器和它的::after伪元素使用了相同的半透明十六进制颜色#2a816c4d，但两者的重叠区域出现了颜色混合变暗的情况，无法保持单一颜色。

问题根源 #

这个十六进制颜色末尾的4d对应RGBA的透明度值0.3，当伪元素的半透明背景和父元素的半透明背景重叠时，颜色会发生叠加：重叠区域的实际透明度会变成0.3 + 0.3*(1-0.3) = 0.51，视觉上就会比单一颜色更深。

解决方案 #

方案1：调整伪元素位置，避免背景重叠

修改伪元素的定位和形状，让它完全不覆盖父元素的背景区域，这样就不会出现颜色叠加。调整后的CSS如下：

.box {
  background: #2a816c4d;
  color: #000;
  cursor: pointer;
  min-width: 100px;
  height: 36px;
  flex: 1;
  flex-grow: 1;
  float: left;
  text-align: left;
  position: relative;
}

.box::after {
  top: 0;
  width: 20px;
  height: 36px;
  content: " ";
  position: absolute;
  border: none;
  z-index: 2;
  right: 0;
  background-color: #2a816c4d;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
}

这里调整了伪元素的宽度、高度和定位点，同时修改clip-path让形状只向父元素右侧延伸，完全避开父元素的背景区域。

方案2：使用整体透明度替代半透明背景

把父元素和伪元素的背景换成不透明的#2a816c，然后给.box添加统一的opacity属性，这样整个容器（包括伪元素）的透明度一致，不会出现叠加问题：

.box {
  background: #2a816c;
  opacity: 0.3;
  color: #000;
  cursor: pointer;
  min-width: 100px;
  height: 36px;
  flex: 1;
  flex-grow: 1;
  float: left;
  text-align: left;
  position: relative;
}

.box::after {
  top: 0;
  width: 50px;
  height: 0;
  content: " ";
  position: absolute;
  border-top: 19px solid transparent;
  border-bottom: 17px solid transparent;
  z-index: 2;
  right: -20px;
  background-color: #2a816c;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

这种方法不需要调整伪元素的布局，实现起来更简单。

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