Как сверстать такую карточку?

Question

[veteral]

Здравствуйте!
Можно сверстать такую карточку без использования картинки?
p.s. Нашел как сделать с помощью radial-gradient https://jsfiddle.net/24ngzo6e/1/
Возник вопрос - как вообще правильно такое верстать: вставлять изображением, версткой или еще как?

Comments

[Ankhena]

p.s. Нашел как сделать с помощью radial-gradient https://jsfiddle.net/24ngzo6e/1/

Надо же какой знакомый фиддл.

Ну вот так и вставлять, псевдоэлементами.

Если вы ещё пороете по моим ответам, то и ещё более близкие реализации найдете ;) ;)

Answer 1

[godsplane]

Верстаете прямоугольник со скруглуение и отступами внутри белого большого прямоугольника и поднимаете наверх через translate или position

Comments

[veteral]

Проблема в другом (может не видно на картинке). Где стрелочка есть скругление во внутрь между двумя прямоугольниками.

[veteral]

В figma сделано как объединение двух фигур с помощью union selection

[xdevelx]

veteral, Вот в фигме и сохраните как svg вместе с скруглением и наложите поверх изображения. Либо svg использовать как маску, но это уже немного посложнее.