Как сделать такую фигуру с помощью маски css?

Question

Подскажите, возможно ли сделать такую маску на css чтобы в дальнейшем можно было вставить любое фото

Answer 1

Подскажите, возможно ли сделать такую маску на css чтобы в дальнейшем можно было вставить любое фото

Другими словами нужно не вставить фото, а обрезать его по заданному криволинейному шаблону. В CSS обрезку изображения выполняет не маска,
а clip-path

Создать криволинейный шаблон в CSS для clip-path проблематично и трудо затратно.
Но с этой задачей легко справится SVG

В векторном редакторе создаете криволинейный шаблон (path) по заданному образцу:

И далее с помощью SVG mask вырезаете фрагмент изображения:

.img {
mask:url(#msk);
} 
.container {
width:50vw;
height:50vh;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" 
 viewBox="0 0 760 860" version="1.1"  style="border:0px solid red">
 <mask id="msk" > 
 
   <path id="p1"   fill="white" d="M45.6 798C20.3 722.3 20 630.9 12.8 546.7c-4.6-52.3-6-105-7.1-157.4C4.6 338.4 3.3 289 5.9 237 9.5 165 9.5 50 71.1 31 122.8 0 194 1.7 249.6 1.8c18.7 1 37.1 4.6 55.7 6.6 13.3 1.4 26.6 3.2 40 3.9 19.7.9 39.5 1 59.2 0 33.7-2 66.9-9.7 100.5-11.6 19.3-1.2 38.7-.7 58 0 19 .6 38.1.2 56.7 3.8 22.7 4.5 47 8.3 65.7 22C706.6 41.8 721.4 66 732 90c14.5 32.7 17.6 69.6 21.7 105.2 6.9 59.5 4.8 119.8 4.8 179.8 0 54.5-.8 110.4-4.2 163.4-2 31.9-3.6 63.8-5.4 95.7-1.8 30.3-2.4 60.8-5.5 91 1 51.4-21.5 89-76.5 107.6-44.8 17.3-94.2 21-142.2 23.7-52.5 3-105-7.6-157.6-8.2-54.3-.7-109.7.8-163 4.5-23.7 1.7-63.8 10.6-93 0-26.7-9.7-56.6-27.6-65.5-54.6z" > 
  </path>
</mask> 

 <image class="img"  xlink:href="https://i.sstatic.net/rU0Ewb7k.png" width="100%" height="100%" /> 
</svg>  
</div>

Answer 2

Создаем в Кореле кривую следующей формы и сохраняем как .png и .svg. Это замкнутая фигура, залитая черным.

Затем указываем файл png в качестве маски через css:

img {
    mask: url(https://i.sstatic.net/cWUEWhKg.png);
    mask-size: cover;
}

<img src="https://i.sstatic.net/iDgYDYj8.png">

Либо указываем svg такого простого вида в качестве маски. Здесь приведен "текст файла" svg (куда-то загрузить его в качестве внешнего файла для ответа не удалось). Но результат будет такой же, но с четкими границами.

img {
  mask: url(./mask.svg);
  mask-size: cover;
}

<svg xmlns="http://www.w3.org/2000/svg" width="350px" height="400px" viewBox="0 0 350 400">

  <path d="M37.76 19.02c41.72,-33.16 86.23,-12.77 137.24,-13.3 51.01,0.53 95.52,-19.86 137.24,13.3 36.14,28.72 42.24,90.93 35.19,193.44 -7.31,106.24 -16.44,121.99 -48.36,160.59 -14.77,17.86 -64.62,28.52 -124.07,26.76 -59.46,1.76 -109.3,-8.9 -124.07,-26.76 -31.92,-38.6 -41.05,-54.35 -48.36,-160.59 -7.05,-102.51 -0.95,-164.72 35.19,-193.44z"/>

</svg>

С помощью mask-position и mask-size выставляете маску по центру, например, и на нужный размер. И получается универсальная маска для фотографий, сколько бы их не было.

UPD. Можно из текста svg создать URL и назначить mask-image. Это больше для имитации работы внешнего svg-файла в качестве маски:

const svg = `<svg id="mask" xmlns="http://www.w3.org/2000/svg" width="350px" height="400px" viewBox="0 0 350 400">

<path d="M37.76 19.02c41.72,-33.16 86.23,-12.77 137.24,-13.3 51.01,0.53 95.52,-19.86 137.24,13.3 36.14,28.72 42.24,90.93 35.19,193.44 -7.31,106.24 -16.44,121.99 -48.36,160.59 -14.77,17.86 -64.62,28.52 -124.07,26.76 -59.46,1.76 -109.3,-8.9 -124.07,-26.76 -31.92,-38.6 -41.05,-54.35 -48.36,-160.59 -7.05,-102.51 -0.95,-164.72 35.19,-193.44z"/>

</svg>`;

const svg_url = `data:image/svg+xml;base64,${btoa(svg)}`;

document.getElementById('photo').style.maskImage = `url(${svg_url})`;

img {
    mask-size: cover;
}

<img id="photo" src="https://i.sstatic.net/iDgYDYj8.png">

БЛОГ НА HUSL

Как сделать такую фигуру с помощью маски css?

Ответы (2 шт):