Как сделать маску версткой?

Question

[Артур]

prntscr.com/8rxie1 - есть шейп, на который наложена фотография. Как такое в верстке реализовать?

Answer 1

[Mikhail Osher]

<div class="result"> <!-- position: relative -->
 <div class="photo"></div> <!-- position: absolute, z-index: 10 -->
 <div class="shape"></div> <!-- position: absolute, z-index: 20 -->
</div>

Comments

[Артур]

не подходит. У нас фон очень большой. И будет обрезать вид такая верстка. Как сделать наоборот?

[Артур]

Надо что бы фото было маской, а шейп был вот такой обрезок

Answer 2

[Pavel Torbeev]

Такую сложную маску реализовать можно наложением png, с прозрачным местом вместо фото, поверх фото. Нижний слой фото, верхний слой png с прозрачным центром.
Навряд ли макет с векторе. Svg не получится. У css довольно примитивные варианты маски

Comments

[Артур]

что в таком случае делать? на фото каждый раз маски накладывать?

[Pavel Torbeev]

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