Как обрезать блок по заданной форме

Если вам не нужно, реализовывать слайдер, а достаточно добавить подобного рода статический блок, то просто вырежьте картинку и сохраните в формате png, а после добавьте в качестве фона. Если же необходимо, чтобы слайдер работал, то можете с помощью position: absolute; наложить сверху белое изображение закругленной формы

Картинку можно обрезать по криволинейной форме с помощью clip-path или mask или pattern.

Но во всех случаях нужен path для криволинейной формы.

• Для того, чтобы получить этот криволинейный <path> необходимо загрузить картинку в векторный редактор и нанести узловые точки с помощью инструмента, - Рисовать кривые Безье (1. на рисунке)

• Изменить тип узлов на автоматически сглаженные цифра 3 на рисунке и передвигая, уменьшая или увеличивая длину рычагов (4), добиться полного совпадения кривой с заданной формой

• Сохранить файл в формате SVG
  Оптимизировать файл (будет убрана лишняя информация Inkscape) с помощью SVG-EDITOR

• Скопировать формулу path

Далее будем использовать этот <path> для обрезки изображения по заданной форме

.container { 
width:100%; 
height:100%; 
background-color:#7AA3A3; 
}

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="none" viewBox="0 0 674 236"  >    
	<defs> 
	 <clipPath id="cp1"> 
	 <path d="m0 0.6 674 0v155c0 0-22.3 24.9-35.8 34.5-12.8 9-27.2 15.8-42 20.9-18.8 6.4-38.7 10-58.5 11.7-21.8 1.9-43.8-0.1-65.7-1.7-30.3-2.3-60.3-7.5-90.4-11.5-26.3-3.5-52.7-6.8-78.9-10.8C232.2 187.7 91.8 162.5 91.8 162.5L0 146.3Z" style="fill:none;stroke:black"/>  
	 </clipPath> 
	 </defs> 
	  
	<image xlink:href="https://i.stack.imgur.com/9db1R.png" width="100%" height="100%" clip-path="url(#cp1)" /> 
</svg>	  
</div>

Приложение полностью адаптивно и работает во всех браузерах