@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;
 }


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

61373b3aa2c38907406954.png
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
@makboriska
.logo-box:before - в этой строчки пробел уберите между ":before"
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы