用纯CSS创建banner。伪元素上的z-index没有达到预期的效果。

Question

下面的代码应该产生一个简单的色带，3D效果是通过CSS伪元素实现的。但是由于某些原因，视觉效果没有正常工作，因为色带的左右 "翅膀 "应该出现在前面的部分后面，但实际上它们出现在前面。不知何故，Z-indexes (+1, -1)并没有按照预期工作。检查了 z-index在伪元素上不起作用。 但无法追溯到问题所在。

/* Color definitions */
:root {
  --color-orange: hsla(26, 83%, 50%, 1);
  --color-orange-darkened: hsl(26, 71%, 44%);
}

body {
  padding: 2em;
}


.shc-ribbon {
  z-index: 1;
}

.shc-ribbon span {
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}

.shc-ribbon span {
  position: relative;
  display: block;
  background: var(--color-orange);
  color: white;
  text-align: center;
  -webkit-box-sizing: border-box;
  -webkit-transform-style: preserve-3d;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}

.shc-ribbon span::before,
.shc-ribbon span::after {
  content: "";
  position: absolute;
  display: block;
  top: -10px;
  border: 20px solid var(--color-orange-darkened);
  z-index: -1;
}

.shc-ribbon span::before {
  left: -30px;
  border-left-color: transparent;
}

.shc-ribbon span::after {
  right: -30px;
  border-right-color: transparent;
}

.shc-ribbon span h3::before,
.shc-ribbon span h3::after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  top: -10px;
  border-color: transparent transparent #272727 transparent;
}

.shc-ribbon span h3::before {
  left: 0;
  border-width: 0 0 10px 10px;
}

.shc-ribbon span h3::after {
  right: 0;
  border-width: 0 10px 10px 0;
}

<div class="shc-ribbon">
  <span>
    <h3>WELCOME</h3>
  </span>
</div>

Answer 1

把你的html代码改成下面的代码。

<div class="shc-ribbon"> 
    <span>
        <h3 style="background-color: hsla(26, 83%, 50%, 1)">WELCOME</h3> 
    </span> 
</div>