SVG-Dreieck-Trennzeichen mit Bildhintergrund

Question

Nun, ich versuche, ein SVG-Trennzeichen zu erstellen. Es funktionierte wie folgt aus:

<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 weit, so gut. Aber jetzt möchte ich einen Hintergrund section1 hinzufügen, einschließlich der SVG "Pick", in Beispiel:

Alles, was ich erreicht habe, ist (wirklich schlechte Ergebnisse):

eine

Hinzufügen

background: url(img) 

das Element

Und:

Justing eine BG section1

Answer 1

Hier Zugabe wird ein Ansatz den gleichen Code wie Ihr Beispiel verwenden, aber die svg Pfad wird ein umgekehrtes Dreieck und absolut auf dem Boden positioniert geändert des Abschnitts:

#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

Zunächst weiß ich, dass dies die Frage nicht direkt beantwortet, aber der Fragesteller gab in den Kommentaren an, dass sie auch an einer Nicht-SVG-Lösung interessiert sind, und aus Gründen, die später in der Post erläutert werden. Es ist ein viel besserer Weg, dieses Problem anzugehen.

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>

Diese Lösung funktioniert durch absolut am Ende eines jeden Abschnitt ein Element platzieren, dass und Rendern der erforderlichen Formen durch die Verwendung von Grenzen überlagern - durch die obere Grenze eine transparente Farbe.

Dies hat folgende Eigenschaften im Vergleich zu einer SVG-Lösung:

• gibt es keine Notwendigkeit für zusätzliche Markup in jedem Abschnitt wegen der allgemeinen Anwendung Regel
• , die auch bedeutet, dass es einfacher ist, weil Sie zu halten, ziehen muss nicht durch mehrere HTML-Dateien gehen, auf der Suche nach verirrten SVGs (weshalb Stil sollte in CSS gehen und nicht Markup an erster Stelle)
• Ändern der Form des SVG erfordert mehrere Werte ändern, während Sie nur müssen Ändern Sie einen einzelnen CSS-Wert für alles, was Sie tun möchten.Die CSS-Regeln sind auch viel mehr Menschen lesbare als die SVG mehrzeiligen Ankerpunkte (dies könnte subjektiv)

Answer 3

Variant mit einem Gradienten:

.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 mit zwei Dreiecke

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

Variant Clip-Pfad

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