CODEWITHSUNDEEP
csscss-positionpseudo-element
Madamadam
Madamadam

Reputation: 938

Creating banner with pure CSS: z-index on pseudo-element not working as expected

The code below should produce a simple ribbon, 3D-effect is achieved by CSS pseudo-elements. But for some reason, the visual effect isn't working correctly because the left and right "wings" of the ribbon shoud appear behind the front part, but actually they appear in front of it. Somehow, the z-indexes (+1, -1) are not working as expected. Checked out z-index not working on pseudo-element but couldn't trace down the issue. 

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

Upvotes: 0

Views: 237

Answers (1)

Mohsen007
Mohsen007

Reputation: 285

change your html code to code below:

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

Upvotes: 1

Related Questions