Как обрезать фоновые изображения

Question

Я пытаюсь обрезать фоновое изображение с пользовательской формой .. но я уложился в это.

Цель состоит в том, чтобы обрезать изображение, как это:

Think каждого шага, как это разные HTML-страницы (страниц 1.html, стр-2.html, стр-3.html).

На странице 1.html фон довольно прост. Важно думать, что это фотографии должны быть отзывчивыми.

page-1.html

background-image: url(image-1.jpg) no-repeat 50% 0; 
background-size: cover; 

Второй пример может быть сделано с помощью <svg> элементов. page-2.html

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="200" viewBox="0 0 100 102" preserveAspectRatio="none" class="triangle-svg"> 
    <path d="M0 100 L50 0 L100 100 Z"></path> 
</svg> 

<style> 
    .triangle-svg { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: auto; 
     bottom: 0; 
     z-index: 999; 
     fill: #fff; 
    } 
</style> 

А как насчет третьего примера? Я не знаю, как с этим бороться. В 3 примере мы видим что-то вроде:

<div class='top-layout'></div> 
<div class='bottom-layout'></div> 

.top-layout изображение должно быть croped. Решение <svg> плохо, потому что мы должны перенести второе изображение на первое.

.top-layout { 
    height: 500px; 
} 
.bottom-layout { 
    height: 500px; 
    position: relative; 
    top: -150px; 
} 

И все эти вещи должны реагировать с background-size: conver эффектом.

Если кто-то может остановить это решение? Спасибо

Answer 1

@phrogz заслуживает всех кредитов, так как он ответил первым.

Демо-версия clip-path, mask and gradient. Для вашего решения замените содержимое группы <g clip-path="url(#clip-bottom)" > ... </g> собственными <image .... clip-path="url(#clip-bottom)" />. Обычно я создавал бы g roup с clip-path, чтобы сохранить очиститель тегов image, но это мои собственные предпочтения.