SVG triangle with image background

Question

Well, I'm trying to create an SVG partition separator. It worked as follows:

<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> 

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

All I did (really bad results):

Adding

 background: url(img) 

to element

AND:

Confirming the addition of BG to section1

Answer 1

Here is an approach using the same code as your example, but the svg path is changed to an inverted triangle and is absolutely located at 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> 

Answer 2

Gradient option:

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

 <div class="element"></div> 

Answer 3

First of all, I know well that this does not directly answer the question, but in the comments he said that they are interested in a non-SVG solution, and for the reasons explained later in the message, this is a much better way to solve this problem.

 section { background: url('http://i.imgur.com/k8BtMvj.jpg'); background-size: cover; height: 200px; position: relative; width: 600px; } section:after { border-color: transparent #2a80b9; border-style: solid; border-width: 90px 300px 0; /* the first value is the height of the triangles, the second is half the width of the parent container */ content: ''; height: 10px; /* this is the height of the solid color underneath the triangles */ position: absolute; bottom: 0; } 

 <section></section> 

This solution works by absolutely placing the element at the end of each section, superimposing it and visualizing the necessary shapes using borders - by providing the upper border with a transparent color.

This has the following qualities compared to the SVG solution:

• there is no need for additional markup in each section due to the universal application of the rule
• it also means that it’s easier for you to maintain, because you don’t have to go through several html files looking for stray SVGs (this is why the style should go in CSS, and not markup in the first place).
• Changing the shape of an SVG requires changing a few values, while you only need to change one CSS value for everything you want to do. CSS rules are also much more readable than multi-line SVG anchor points (this can be subjective).

Answer 4

Option with two triangles

 *{ padding: 0; margin: 0; box-sizing: border-box; } .element { position: relative; width: 100%; height: 200px; background: url(http://i.imgur.com/k8BtMvj.jpg) no-repeat center top; 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 #00f; } .element:after{ right: 0; border-width: 0 0 100px 55vw; border-color: transparent transparent #00f transparent; } 

 <div class="element"></div> 

Clip option

 *{ padding: 0; margin: 0; box-sizing: border-box; } .element { position: relative; width: 100%; height: 200px; background: url(http://i.imgur.com/k8BtMvj.jpg) no-repeat center top; background-size: cover; } .element:before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: #00f; -webkit-clip-path: polygon(50% 95%, 100% 40%, 100% 100%, 0 100%, 0 40%); clip-path: polygon(50% 95%, 100% 40%, 100% 100%, 0 100%, 0 40%); } 

 <div class="element"></div>