В блоке есть выемка, как ее сверстать?

Question

[egowka]

Есть блок, по центру сверху есть выемка, как ее можно сверстать? У блока есть тень и обводка вот они:
box-shadow: 0 30px 80px rgba(34, 36, 37, 0.08);
border-radius: 30px;
border: 10px solid #f9fafa;

Answer 1

[Lord_Dantes]

Охх... Попробуйте костылем сделать псевдо-элемент(это будет не иконка), и сделать её кругом после чего сделать в ней самому внутреннюю тень и наложить сверху блока.

UPD придумал, вырежьте этот кусок выемки и вставьте картинкой в svg. Должно сработать по идеи.

Answer 2

[Антон Муравьев]

Например, создать дочерний div, который будет кругом (border-radius: 50%) в цвета фона. Получится, что кусок как будто вырезан. Также из способов. Можно создать готовый блок с вырезом, например в PS, потом вставлять картинкой. Третий вариант - svg.

Answer 3

[Vyach Gor]

как вариант - вот так link . Только поменяйте расположение под вашу ситуацию