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

Question

下面的代码应该会产生一个简单的ribbon，3D效果是通过CSS伪元素实现的。但由于某种原因，视觉效果无法正常工作，因为缎带的左右"翅膀"应该出现在前部后面，但实际上它们出现在前部前面。不知何故，z索引(+1，-1(没有按预期工作。已签出z索引，无法处理伪元素，但无法追踪问题。

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