Как правильно скрыть часть изображения?

Решение SVG

С помощью техники,- использование mask svg, можно сделать очень сложные вырезы, которые трудно повторить в css

Для этого понадобится минимальные навыки работы в векторном редакторе.

• Загружаем нужную картинку в векторный редактор (Inkscape) и рисуем path который будет служить границей вырезанной части.

• Рисуем кривую с помощью инструмента -

• Далее в меню Inkscape выбираем Контур / оконтурить обводку

• Сохраняем файл SVG и в любом текстовом редакторе копируем из файла формулу кривой

<path d="m1501.0981 531.97843c0 0-136.8524-9.46102-176.9284 35.38568-34.0435 38.09613 4.578 104.75892-13.0368 152.71718-24.375 66.3636-135.9556 121.05631-135.9556 121.05631L1500 843Z" id="path3338" style="fill:none;stroke:#000"/>

Вот эта кривая линия и будет границей вырезания части изображения.

Ниже код с маской:

<style> 
.container { 
width:100%; 
height:100%; 
background:grey; 
background-size:cover; 
background-position: 0% 100%; 
} 
 
</style> 
<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1500 843" preserveAspectRatio="xMinYMin meet" > 
<defs> 
 <mask id="cat" >  
  <rect width="100%" height="100%" fill="white" /> 
  <path d="m1501.0981 531.97843c0 0-136.8524-9.46102-176.9284 35.38568-34.0435 38.09613 4.578 104.75892-13.0368 152.71718-24.375 66.3636-135.9556 121.05631-135.9556 121.05631L1500 843Z" id="path3338" style="fill:black;stroke:#000"/> 
 </mask> 
</defs> 
 
	<image xlink:href="https://i.stack.imgur.com/styoZ.jpg" width="100%" height="100%" mask="url(#cat)" /> 
 
 </svg>	   
  
 </div>

Вам может подойти свойство mask-image

Пример: http://jsfiddle.net/fbB3P/254/

Документация: https://developer.mozilla.org/ru/docs/Web/CSS/mask-image

Поддержка браузерами: https://caniuse.com/#search=mask-image

Я бы пошел путем наименьшего сопротивления и просто отредактировал изображение с созданием прозрачного слоя.(Тут нужно отказаться от формата jpg)

body { 
  background: linear-gradient(to right, blue, red); 
  padding: 0 20%; 
} 
 
section, div { 
  overflow: hidden; 
} 
 
div { 
  padding-top: 100%; 
  margin-top: -100%; 
  transform: skew(0deg, -10deg); 
} 
 
img { 
  display: block; 
  max-width: 100%; 
  transform: skew(0deg, 10deg); 
}

<section> 
  <div> 
    <img src="//i.stack.imgur.com/styoZ.jpg"> 
  </div> 
</section>

Если правильно вас понял. То в этом случае, лучше img обернуть в div и div-блоку задать размеры width и height меньшие, чем у img и добавить свойство для div overflow: hidden. Например: Размеры img (width: 300px, height: 300px) Делаем:

<div style="width: 250px; height: 250px; overflow: hidden;">
  <img src="/" width="300" height="300" />
</div>

Изображение обрежется на 50px справа и снизу.

Для фона тоже самое.