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

#html #css #html5 #css3 #svg

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












   

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

   

Вот всё, что я сделал (действительно плохие результаты):   

Добавил:     

background: url(img) к элементу      

  

и добавил  background к section1    

    

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

Ответы

Ответ 1

Вариант с использованием 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");
}




Ответ 2

Вот подход, использующий тот же код, что и в вашем примере, но путь svg изменен на
инвертированный треугольник, который  абсолютно позиционирован в нижней части section:    



#section1{
  position:relative;
  background:url('http://i.imgur.com/k8BtMvj.jpg');
  background-size:cover;
  height:200px;
}
svg{
  position:absolute;
  bottom:-10px; left:0;
  width:100%; height:100px;
  display:block;
}

  





Перевод ответа: SVG triangle separator with image background @web-tiki


Ответ 3

Еще как вариант



.element {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}

.element:before,
.element:after {
  content: '';
  position: absolute; bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.element:before {  
  left: 0;
  border-width: 100px 0 0 55vw;
  border-color: transparent transparent transparent #007bff;
}

.element:after {  
  right: 0;
  border-width: 0 0 100px 55vw;
  border-color: transparent transparent #007bff transparent;
}



Ответ 4

Вариант с использованием before и after:



.element {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
  overflow: hidden;
}

.element:before, .element:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2A80B9;
}

.element:before {
    left: -50px;
    bottom: -86%;
    transform: rotate(16deg);
}

.element:after {
    right: -50px;
    bottom: -86%;
    transform: rotate(-16deg);
}



Ответ 5

Вариант с использованием градиента:



.element {
  display: block;
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(-164deg, transparent 72%, #2A80B9 72%, #2A80B9 100%),
linear-gradient(164deg, transparent 72%, #2A80B9 72%, #2A80B9 100%), url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: auto, auto, cover;
  overflow: hidden;
}