Создание баннера с чистым CSS: z-index на псевдоэлементе не работает должным образом - PullRequest
Новая
       19

Создание баннера с чистым CSS: z-index на псевдоэлементе не работает должным образом

0 голосов
/ 05 мая 2020

Приведенный ниже код должен создавать простую ленту, 3D-эффект достигается с помощью CSS псевдоэлементов. Но по какой-то причине визуальный эффект работает некорректно, потому что левое и правое «крылья» ленты должны появляться позади передней части, но на самом деле они появляются перед ней. Почему-то z-индексы (+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>

1 Ответ

1 голос
/ 05 мая 2020

измените свой html код на код ниже: 

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