Как создать фигуры с внутренними кривыми с помощью CSS? ⇐ CSS

[Anonymous]

Чего я пытаюсь достичь < /p>
Я хочу создать эффект из изображения, см. Часть с красной границей.
Я попробовал это: < /p>


.image {
height: 1019px;
width: 66%;
background-color: #DFDFD8;
margin: 0 auto;
--r: 125px;
--s: 45px;
border-radius: 50px;
--_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 78%, #0000 77%) no- repeat;
mask: right 0 bottom calc(var(--s) + var(--r)) var(--_m), right calc(var(--s) + var(--r)) bottom 0 var(--_m), radial-gradient(var(--s) at 100% 100%, #0000 101%, #000 calc(119% + -14px)) calc(-1 * var(--r)) calc(-1 * var(--r)) no-repeat, conic-gradient(from 100deg at calc(90% - var(--s) - 3 * var(--r)) calc(88% - var(--s) - 2 * var(--r)), #0000 15%, #000 0);
}< /code>

Код: Выделить всё

[img]{{image}}[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -using-css