Separatore triangolo SVG con sfondo immagine

Question

Bene, sto provando a creare un separatore di sezioni SVG. Funzionava così:

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

Fin qui, tutto bene. Ma ora, voglio aggiungere uno sfondo alla sezione 1, tra cui lo SVG "raccogliere", nell'esempio:

Tutto quello che ho realizzato è (risultati davvero male):

Aggiunta di un

background: url(img) 

all'elemento

E:

Justing aggiungendo una BG per section1

Answer 1

Ecco un approccio utilizzando lo stesso codice come esempio, ma il percorso SVG è cambiato in un triangolo rovesciato e assolutamente posizionato sul fondo della sezione:

#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

Prima di tutto, sono ben consapevole che questo non risponde direttamente alla domanda, tuttavia l'intervistatore ha dichiarato nei commenti che sono interessati anche a una soluzione non SVG, e per ragioni spiegate più avanti nel post, è un modo molto migliore per affrontare questo problema.

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>

questa soluzione funziona da assolutamente ponendo un elemento alla fine di ogni sezione, sovrapponendo che e rendendo le forme richieste per l'uso delle frontiere - dando il bordo superiore di un colore trasparente.

Questo ha le seguenti qualità rispetto ad una soluzione SVG:

• non c'è alcuna necessità di markup in più in ogni sua parte a causa della regola universalmente applicando
• che significa anche che è più facile da mantenere, perché don Deve passare attraverso più file html, cercando SVG vaganti (che è il motivo per cui lo stile dovrebbe andare in CSS e non markup in primo luogo)
• cambiare la forma di SVG richiede la modifica di diversi valori, mentre è solo necessario cambia un singolo valore CSS per qualsiasi cosa tu voglia fare.Le regole CSS sono anche molto più leggibile rispetto alle multilinea punti di ancoraggio SVG (questo potrebbe essere soggettivo)

Answer 3

Variante con un gradiente:

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

Variante con due triangoli

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

Variante clip-percorso

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