SVG треугольник - сепаратор с фоновым изображением

Я пытаюсь создать разделитель фона на основе путей SVG. Он работает, следующим образом:

Все идет нормально. Но теперь, я хочу, добавить фон к section1, в том числе применить SVG , в примере:

Вот всё, что я сделал (действительно плохие результаты):
Добавил:
background: url(img) к элементу

и добавил background к section1

Перевод вопроса: SVG triangle separator with image background @Jorge Anzola

Ответ

Вариант с использованием clip-path
Поддержка браузерами - http://caniuse.com/#search=clip-path

.element { position: relative; width: 100%; height: 200px; background-image: url(http://i.imgur.com/k8BtMvj.jpg); background-size: cover; } .element:before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%;; height: 100px; background: #2980B9; -webkit-clip-path: polygon(50% 75%, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 75%, 100% 0, 100% 100%, 0 100%, 0 0); -webkit-clip-path: url("#clippath"); clip-path: url("#clippath"); }