@Flan

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

Как реализовать такую трапецию с закруглениями углов?
667541cba59e9995333111.png

Делал через clip-path, border-radius применяется только для верхних углов (что логично). А polygon, как я понимаю, не принимает закругления.

<div class="clipboard" style="clip-path: polygon(0 43%, 74% 43%, 100% 100%, 0% 100%);"></div>
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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