如何让CSS伪元素:after继承div的背景色而非字体颜色

问题核心：伪元素设置border-left-color: inherit时，继承的是父元素的color（字体颜色），而非background-color，导致伪元素在白色页面背景下不可见。

原因说明 #

CSS中，background-color不属于可继承属性，伪元素无法直接通过inherit关键字继承父元素的背景色；而border-color的默认值为currentColor，即继承父元素的字体颜色，因此你设置的border-left-color: inherit实际继承的是父元素的color属性值。

解决方案：使用CSS自定义属性（变量） #

通过定义一个存储背景色的变量，让父元素和伪元素共用该变量，既能实现“继承”效果，又方便后续维护：

修改后的完整CSS代码：

div {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  color: black;
  --bg-color: #f65e3f; /* 定义背景色变量 */
  background-color: var(--bg-color);
  padding: 30px 60px; /* 简化padding的写法 */
}

.drupes:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-bottom: 140px solid transparent;
  border-left-color: var(--bg-color); /* 引用变量获取父元素背景色 */
}

备选方案：直接指定颜色值 #

如果不需要复用颜色值，也可以直接在伪元素中写入与父元素相同的背景色值：

.drupes:after {
  /* 其他属性不变 */
  border-left-color: #f65e3f;
}

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