使用纯 CSS 创建横幅：伪元素上的 z-index 未按预期工作

Question

下面的代码应该会产生一个简单的功能区，3D 效果是由 CSS 伪元素实现的。但是由于某种原因，视觉效果无法正常工作，因为缎带的左右“翅膀”应该出现在前面的后面，但实际上它们出现在前面。不知何故，z-indexes (+1, -1) 没有按预期工作。检查了z-index not working on pseudo-element，但无法追查问题。

/* 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>