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

Столкнулся с проблемой верстки блока с вырезом, чтобы у этого блока еще была тень, и не по прямоугольному контуру, а по контуру выреза. А также тень у круглого элемента. Я сверстал верхний и нижний блок, а сверху них наложил третий(круглый). Но остались проблемы:
1. Не у всех углов border-radius получился закругленный
2. Не могу наложить тень на верхний и нижний блоки, т.к. она идет не по контуру фигуры.
Здесь как должно быть:
5de2628f4c37d908665461.png
А здесь как я сделал
5de262983221f078626682.png
Подскажите, пожалуйста, как решаются такие вопросы?
  • Вопрос задан
  • 2233 просмотра
Решения вопроса 1
RAX7
@RAX7
на SVG вырез можно сделать хоть в форме котенка
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
symbol
@symbol
short
https://jsfiddle.net/z6jm5L3h/
частичное решение ( без скругления внутренних углов)
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега CSS
Комментировать
Ваш ответ на вопрос

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

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