Задать вопрос
KarnaDev

Полина

Frontend developer
Ответы пользователя по тегу CSS

  • Как реализовать такую же трапецию на CSS с закруглёнными углами?

    KarnaDev
    @KarnaDev
    Frontend developer
    Самый простой вариант, наверное, сделать SVG.

    Немного корявый способ на css - наложить две фигуры друг на друга.
    <div class="container">
  <div class="shape box"></div>
  <div class="shape parallelogram"></div>
</div>

    .shape {
  width: 1000px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.box {
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.parallelogram {
  transform: skewY(-4deg);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  margin-top: -35px; /* степень перекрытия объектов*/
  z-index: 2;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как поставить картинку на один уровень с текстом?

    KarnaDev
    @KarnaDev
    Frontend developer 
    .user-avatar {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin-right: 10px; /* расстояние между иконкой и именем пользователя  */ 
}
    Ответ написан
    10 комментариев
    10 комментариев

  • Как правильно задать градиент?

    KarnaDev
    @KarnaDev
    Frontend developer
    Можно попробовать так
    div {
  border-radius: 32px;
  height: 515px;
  max-width: 1228px;
  width: 100%;
  background: radial-gradient(circle at bottom left, 
    rgb(80, 71, 64), 
    rgb(92, 67, 89) 16.363%, 
    rgb(56, 43, 63) 42.194%, 
    rgb(23, 23, 23) 100%);
  /* Градиент начинается от нижнего левого угла и идет к правому верхнему углу */
}

    radial-gradient позволяет указать начальную точку градиента. В вашем случае circle at bottom left, чтобы установить начало в нижнем левом углу
    Ответ написан
    Комментировать
    Комментировать