Как сделать полукруглый вырез в квадратном блоке чтоб не было острых углов?

Question

[dmitriypur]

На первом скриншоте не понятно как сделать чтобы у наезжающих 3х белых блоков по бокам были такие радиусы отступы (не знаю как сформулировать, пометил красным)

На втором сриншоте не пойму как сделать полукруглые вырезы без острых краев, еще и чтобы тени никуда не пропали


На третьем тоже самое как у вырезов скруглить края?

Comments

[Владимир Юрченков]

Ради интереса гляньте как сделано на сайте будьучителемрф или как-то так

[dmitriypur]

Владимир Юрченков, спасибо!

Answer 1

[DIVSIDE]

Используйте псевдо after и svg
Или же svg маску для блока

Comments

[dmitriypur]

Спасибо! Примерно так и думал.

[dmitriypur]

Все таки не понял как вырезать полукруг и чтоб тень была

[DIVSIDE]

dmitriypur, Это вам нужно к дизайнеру обратиться, если не знаете как достать такую фигуру с фигмы



Но лучше все же маска, а не clip path. Т.к нативно тень поддерживает

[dmitriypur]

DIVSIDE, Спасибо!

[DIVSIDE]

dmitriypur, помог - отмечайте решением