Как верстаются блоки со сложным вырезом?

Question

[zeppelin32]

Столкнулся с проблемой верстки блока с вырезом, чтобы у этого блока еще была тень, и не по прямоугольному контуру, а по контуру выреза. А также тень у круглого элемента. Я сверстал верхний и нижний блок, а сверху них наложил третий(круглый). Но остались проблемы:
1. Не у всех углов border-radius получился закругленный
2. Не могу наложить тень на верхний и нижний блоки, т.к. она идет не по контуру фигуры.
Здесь как должно быть:

А здесь как я сделал

Подскажите, пожалуйста, как решаются такие вопросы?

Answer 1

[RAX7]

на SVG вырез можно сделать хоть в форме котенка

Comments

[zeppelin32]

А как вы SVG рисовали? Не руками же значения писали))

[RAX7]

zeppelin32, конечно не руками, а в Adobe Illustrator сделал, потом сконвертировал в data-url https://yoksel.github.io/url-encoder/

[zeppelin32]

RAX7, благодарю

[RAX7]

zeppelin32, пожалуйста =)

Answer 2

[name surname]

https://jsfiddle.net/z6jm5L3h/
частичное решение ( без скругления внутренних углов)

Answer 3

[profesor08]

https://developer.mozilla.org/ru/docs/Web/CSS/clip-path