Как добиться такого закругления углов через css?

Question

Есть вот такой вот блок из макета:

Как мне добиться относительно похожих углов? Работал с border-radius, выходит вот так:

Answer 1

Вот как вариант:

div {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 300px;
  height: 150px;
  background: black;
  background: linear-gradient(to bottom, black, black 0%, black calc(100% - 25px), transparent calc(100% - 25px), transparent 100%);
}

div::before {
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  bottom: 0;
  left: -100px;
  width: 500px;
  height: 150px;
  background: black;
  border-radius: 0 0 100% 100%;
}

<div></div>

или такой:

div {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 300px;
  height: 150px;
  background: black;
  border-radius: 0 0 100% 100%;
  clip-path: polygon(10% 0, 90% 0, 90% 100%, 10% 100%);
}

<div></div>

БЛОГ НА HUSL

Как добиться такого закругления углов через css?

Ответы (1 шт):