1

введите сюда описание изображения введите сюда описание изображения

в макете указано только это введите сюда описание изображения

а когда копировать из фигмы, то получается background: linear-gradient(180deg, #002638 61.58%, rgba(0, 38, 56, 0) 100%);

но когда вставлять через псевдо- вообще не похоже

.item {
position: relative;
  width: 150px;
  height: 150px;
background: #FCFBFC;
padding: 20px;
}

.item:after {
  position: absolute;
  content: ' ';
  left: 20px;
  width: calc(100% - 40px);
  height: 30px;
 bottom: 0px;
  background: linear-gradient(180deg, #002638 61.58%, rgba(0, 38, 56, 0) 100%);

}
<div class="item">
Якісний товар, привітний персонал який радо прийде на допомогу, покаже, проконсультує. Окремо хочу подякувати за гарантійне обслуговування  речей.
</div>

2
  • На что должно быть похоже? Чем не похоже?
    – Iurii
    14 ноя 2021 в 19:30
  • обновлено......
    – elka
    14 ноя 2021 в 19:33

1 ответ 1

1

Так должно быть?

.item {
  position: relative;
  width: 150px;
  height: 150px;
  background: #FCFBFC;
  padding: 20px;
  /**/
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(180deg, #002638 61.58%, rgba(0, 38, 56, 0) 100%);
  /**/
}

.item:after {
  position: absolute;
  content: ' ';
  left: 20px;
  width: calc(100% - 40px);
  height: 30px;
  bottom: 0px;
}
<div class="item">
  Якісний товар, привітний персонал який радо прийде на допомогу, покаже, проконсультує. Окремо хочу подякувати за гарантійне обслуговування речей.
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.