Как внизу блока сделать маску волной и поместить туда изображение?

Question

[I_want_to_know]

Нужно внизу блока (секции) создать маску в виде волны, в которой лежит изображение.
Примерно как на этой картинке:


Подробнее:
На сером фоне некий контент (фон не обязательно серый, выделил просто для наглядности), потом белая полоса (бордер пикселей 5), потом изображение, которое можно центрировать верх-низ, право-лево.

Answer 1

[Aetae]

У тебя на кратинке не "бордер пикселей 5" а весьма неравномерный нарисованный контур.

Если он - часть картинки, то просто делаешь из картинки PNG с прозрачностью и всё.
Иначе в CSS есть свойство mask - делаешь пару масок - одну на контур, одну на картинку под ним, или совмещаешь с clip-path.

Вот так можно обойтись одной маской, если использовать оба варианта наложения:

Comments

[I_want_to_know]

Спасибо.
По поводу бордера, вы верно заметили.
Нарисовал схематично.
Суть вроде бы уловил, попробую.

[Aetae]

I_want_to_know, если бордер не нужен красивый, а можно обычный, ровно 5px то можно обойтись без растровой картинки-маски, а использовать либо clip-path (один раз на картинке, один на белой подложке, со смещением 5px для имитации границы), либо тот же mask но с svg картикой у которой тот же path и stroke, либо clip-path с filter для границы... В общем много вариантов.:)

Answer 2

[Lara B]

Надо посмотреть , какими слоями это реализовано в макете. Если картинка в формате png + маска в формате png , то их можно объединить в фигме и сохранить , как один слой. А потом добавить и через z-index поднять выше верхнего слоя Но это все приблизительно, так как сложно судить по картинке, не видя макета

Comments

[I_want_to_know]

макета нет, всё с нуля... :(

[Ankhena]

Если картинка в формате png + маска в формате png , то их можно объединить в фигме и сохранить , как один слой

Если уверены на 110%, что никто и ни при каких обстоятельствах не захочет менять ни волну ни картинку.

А потом добавить и через z-index поднять выше верхнего слоя

Выше цвета фона поднимать z-index'ом это сильная идея.
Это либо множественный фон, если всё таки слили в одну картинку.
Либо псевдик (с маской или clip-path или типа того). Который сам по себе ниже фона не провалится. Так что z-index очень преждевременный.