Jorge Anzola Jorge Anzola - 5 months ago 99
CSS Question

SVG triangle separator with image background

Well, I'm trying to create an SVG section separator. It worked like this:



<section id="section1">
</section>
<svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z" />
</svg>
<section id="section2">
</section>





enter image description here

So far, so good. But now, I want to add a background to section1, including the SVG "pick", in example:

enter image description here

All I've accomplished is (really bad results):

Adding a

background: url(img)


to the element

enter image description here

And:

Justing adding a BG to section1

enter image description here

Answer

Here is an approach using the same code as your example but the svg path is changed to an inverted triangle and absolutly positionned to the bottom of the 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;
}
<section id="section1">
  <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
    <path d="M0 0 L50 90 L100 0 V100 H0" fill="#2A80B9" />
  </svg>
</section>

Comments