Как верстать блок необычной формы адаптивно?

Question

[nukvi22]

В макете есть вот такой блок необычной формы с вырезом. Не могу понять каким образом его можна сверстать адаптивно, чтобы он подстраивался под содержимое по высоте и при этом не терял пропорции сверху?

Comments

[Ankhena]

Ближайшие аналоги
https://jsfiddle.net/Ankhena/kLr7onyb/
https://jsfiddle.net/Ankhena/1hu9ot0q/1/

Можно использовать SVG для скругления верхней части основного блока.

Вам можно даже не "вырезать" круглях, а наоборот сделать его обводкой для картинки. Если фон однотонный и не собирается меняться. Впрочем, даже если и собирается меняться, но на однотонный, то тоже самое.

[nukvi22]

Ankhena, спасибо вам за ответ! Не понятно еще как туда border добавить вокруг всей этой фигуры)

[Ankhena]

nukvi22, что-то я не вижу на скрине бордера..
Если речь про тень, то в примерах она присутствует.

[xdevelx]

Ankhena, Кстати, тот пример со срезанными закругленными углами (https://jsfiddle.net/Ankhena/1hu9ot0q/1/) можно еще реализовать маской с одним радиальным градиентом https://codepen.io/xdevelx/pen/rNEOLZb

[xdevelx]

И здесь на макете я не вижу выреза, есть только скругленное изображение, под которым подложкой псевдоэлемент с градиентом. А вот как реализовать верхние скругления карточки, я бы сперва смотрел как их сделал дизайнер.

[Ankhena]

xdevelx, да.
Тому примеру много лет :)

Answer 1

[Александр Шемаханов]

Как уже в комментариях писали, можно сделать максой с радиальным градиентом, а тень с помощью фильтра drop-shadow(), накинул пример: