Маскировка изображения с помощью CSS

Question

Я сделал такой дизайн:

Как с помощью CSS фигурно обрезать нижний край фона?

Я пробовал такой код:

.img-poster {
  display: block;
  max-width: 100%;
  -webkit-mask-image: url(https://cdn.pbrd.co/images/GYiCod1.png), url(https://cdn.pbrd.co/images/GYiCQsM.png);
  -webkit-mask-position: bottom center, center center;
  -webkit-mask-repeat: no-repeat, no-repeat;
}

.add {
  -webkit-mask-composite: add;
}

<section class="section poster-container">
  <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>

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

https://i.stack.imgur.com/fg2k5.png
https://i.stack.imgur.com/zmylJ.png

Можете ли вы сказать мне, что не так в моем коде?
Я знаю, что могу просто импортировать в PNG, но я пытался использовать CSS

Answer 1

Вам нужно использовать только одно изображение, которое является нижней частью вашей маски, а затем использовать простой градиент для другой части. Вам не нужна mask-composite Просто отрегулируйте size/position, чтобы обе маски не перекрывались:

.img-poster {
  display: block;
  max-width: 100%;
  -webkit-mask:  
     linear-gradient(#fff,#fff)              top,
     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
  -webkit-mask-size:
     100% calc(100% - 30px),
     auto 30px;
  -webkit-mask-repeat: repeat-x;
  mask:  
     linear-gradient(#fff,#fff)              top,
     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;
  mask-size:
     100% calc(100% - 30px),
     auto 30px;
  mask-repeat: repeat-x;
}

<section class="section poster-container">
  <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="" class="img-poster add img-responsive">
</section>

Answer 2

Решение SVG + filter

Эффект достигается использованием одного и того же изображения 2 раза.

К нижнему изображению применены фильтры feTurbulence и feDisplacementMap. Изменяя их атрибуты baseFrequency, numOctaves="2", seed="1", scale="75" придаем краям зубчатую форму. За счет этого изображение увеличивается в ширину и высоту.

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

.container {
 width:100vw;
 height:100vh;
 }

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	  viewBox="0 0 1800 900" >
 <defs> 
   <mask id="msk1"> 
        <rect x="100%" y="100%"  fill="white" /> 
      <rect x="1700" y="0" width="50" height="900" fill="white" />
   </mask>
     <filter id="displacementFilter">
     <feTurbulence type="turbulence" baseFrequency="0.01 0.01"
        numOctaves="2" result="turbulence" seed="1"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="75" xChannelSelector="R" xChannelSelector="G" yChannelSelector="B"/>
    </filter>	   
 </defs> 
        
       <!-- Изображение обработано фильтром и пэтому увеличились габаритные размеры за счет высоты зубцов -->
   <image   filter="url(#displacementFilter)" xlink:href="https://i.stack.imgur.com/paWbQ.jpg" width="1700" height="850" />
	   <rect mask="url(#msk1)" x="1700" y="0" width="50" height="900" fill="white" /> 
	   <!-- Точно такое же исходное изображение, но без обработки  -->
	 <image x="0"  xlink:href="https://i.stack.imgur.com/paWbQ.jpg" width="1700" height="850" />
</svg>	
</div>

БЛОГ НА HUSL

Маскировка изображения с помощью CSS

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

Решение SVG + filter