如何用CSS让伪类（before/after）覆盖父类渐变背景？

核心问题是渐变坐标系不匹配：

• 父元素.hzmenu的渐变基于自身原始坐标系的45deg方向（从左上到右下）
• 而:after伪元素被设置了rotate(45deg)，它的渐变是基于旋转后的局部坐标系，所以即使写了相同的45deg，视觉上的渐变方向和父元素完全不同

另外，当前代码中伪元素同时设置了边框和渐变背景，边框会干扰渐变箭头的视觉效果，建议移除边框样式。

修正后的代码 #

CSS #

.test div {
  display: inline-block;
  position: relative;
  height: 40px;
  line-height: 25px;
  padding: 0 15px 0px 25px;
  border: 1px solid transparent;
  background: #16a0e3;
  float: left;
  display: flex;
  margin: 2px 2px 2px 0px;
  width: 150px;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.test .hzmenu {
  background: linear-gradient(45deg, black, transparent);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  transform-style: preserve-3d;
}

.test div a:after {
  content: '';
  /* 移除边框，避免干扰渐变效果 */
  width: 29px;
  height: 29px;
  position: absolute;
  right: -6px;
  top: 1px;
  z-index: 1;
  transform: translate(11px, 4px) rotate(45deg);
  /* 调整渐变角度，抵消伪元素旋转带来的坐标系变化 */
  background: linear-gradient(-45deg, black, transparent);
}

HTML #

<div class="test">
  <div class="hzmenu">
    <a href="#">
            Menu1
        </a>
  </div>
</div>

关键调整点 #

• 将伪元素的渐变角度改为-45deg，这样在伪元素旋转45deg后，渐变方向会和父元素的45deg渐变视觉上保持一致
• 移除伪元素的边框样式，让渐变完整展示出箭头效果

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