Как реализовать такую задачу?

Question

[by_ultra]

Доброго дня.
Нужна помощь или правильный пинок)

Требуется сделать плашку, где 3 элемента не зависимы.
Рамка и фон плашки залиты градиентом, но получается следующее:

<div class="logo-box">
  <div class="logo__number">
    20
  </div>
  <div class="logo__item-box">
    <div class="logo__item">
      ЛЕТ
    </div>
    <div class="logo__item">
      на рынке
    </div>
  </div>
</div>

.logo-box {
  max-width: 200px;
  color: #fff;
  display: flex;
  align-items: center;
  transform: skew(-5deg);
  justify-content: center;
  position: relative;
}

.logo-box :before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  right: 3px;
  background: linear-gradient(to right, #0575e6, #021b79);
  z-index: -1;
}

.logo-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
  z-index: -4;
  border-radius: 3px;
}

 .logo__item{
   transform: skew(5deg);
   position: relative;
   z-index: 999 ;
 }

 .logo__number{
   position: relative;
   color: #ffffff;
   font-size: 46px;
   transform: skew(5deg);
   margin-right: 5px;
   font-weight: bold;
    z-index: 999;
 }

Вот, что вышло:

Comments

[andand44]

Подозреваю, что нужно убрать пробел у
.logo-box :before {}
Должно быть так
.logo-box:before {}

[by_ultra]

andand44,
Спасибо помогло.
Очень эпично )

Answer 1

[makboriska]

.logo-box:before - в этой строчки пробел уберите между ":before"