Как сверстать такой элемент?

Question

[Антон Литвиненко]

Столкнулся и я с элементом, который не могу придумать как сверстать.Практически везде на сайте дизайнер нарисовал на элементах вот такие выемки. При этом под выемками есть еще элемент то ли с тенью, то ли с градиентом, чтобы оттенять эту выемку.


Прошу натолкнуть на мысль как сделать эти выемки

Comments

[Артур Т]

Через псевдоэлемент
::before

Answer 1

[RAX7]

Сам вырез можно сделать радиальным градиентом, как здесь:
Как адаптивно сверстать блок с вырезом-полукругом? SVG-маска?
Тень - filter: drop-shadow
Уши - псевдо-элементами

Comments

[Антон Литвиненко]

У вас хороший пример по этой ссылке:
https://jsfiddle.net/RAX7/wfp93cbo/
Я попробовал сделать с помощью множественного фона два выреза, но почему-то не сработало,
https://jsfiddle.net/r3htpx0z/
хотя описание на mdn позволяет использовать радиальный градиент в качестве множественных фонах
Получилось с двумя псевдоелементами:
https://jsfiddle.net/jprsqy3a/
но мне не очень нравится такое рашение. Что я упускаю с множественными фонами?

[RAX7]

Антон Литвиненко,
радиальный градиент можно использовать во множественных фонах

но псевдо-элементов все равно придется использовать больше чем один

[Антон Литвиненко]

RAX7, Спасибо, завтра буду читать про радиальный градиент, до этого использовать не доводилось, нужно разобрать ваш пример

[RAX7]

Антон Литвиненко, да не за что. Что там читать, он такой же как линейный только радиальный =)

Answer 2

[Арсений Матыцин]

Нус если оно везде одинаковое, то прямо так и можно псевдоэлементами нарезать. А вообще очевидно же, тут поможет svg.

Хотя конечно же, интересно, что хотел этим сказать дизайнер...

Comments

[Антон Литвиненко]

Размеры этих выемок отличаются.
Стыдно признаться, но я не совсем понимаю, что значит поможет SVG, опыт с свг у меня на самом базовом уровне, что хоть имеется в виду? я разберусь, погуглю, но пока не понимаю даже что гуглить

[Арсений Матыцин]

Антон Литвиненко, формы + маски + тень.
Начать гуглить можно тут.