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

Question

[Flan]

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


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

<div class="clipboard" style="clip-path: polygon(0 43%, 74% 43%, 100% 100%, 0% 100%);"></div>

Comments

[Сергей Сергей]

может по этому пути получится.

Answer 1

[Полина]

Самый простой вариант, наверное, сделать 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;
}