Separator trójkątów SVG z tłem obrazu

Question

Próbuję utworzyć separator sekcji SVG. Działało to tak:

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

Tak daleko, tak dobrze. Ale teraz chcę dodać tło do sekcja1, w tym SVG „pick”, w przykładzie:

Wszystko co jest realizowane (naprawdę złe wyniki):

Dodawanie

background: url(img) 

do elementu

I:

Justing dodanie BG do sekcja1

Answer 1

Tutaj jest podejście z użyciem tego samego kodu jako swoim przykładzie ale ścieżka SVG jest zmieniane do odwróconego trójkąta i absolutnie umieszczony na dnie na odcinku:

#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

Przede wszystkim doskonale zdaję sobie sprawę, że to nie odpowiada bezpośrednio na pytanie, jednak ankietowany stwierdził w komentarzach, że są zainteresowani rozwiązaniem innym niż SVG, oraz z przyczyn wyjaśnionych w dalszej części postu, to znacznie lepszy sposób na rozwiązanie tego problemu.

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>

To rozwiązanie działa przez absolutnie umieszczenie elementu na końcu każdego odcinka, że ​​nakładanie i renderowania wymaganych kształtów przy użyciu granic - dając górnej granicy przejrzysty kolor.

ta ma następujące zalety w porównaniu z rozwiązaniem SVG:

• nie ma potrzeby dodatkowych znaczników w każdym punkcie ze względu na powszechnie obowiązującej reguły
• Oznacza to również, że łatwiej jest utrzymać, bo don musisz przechodzić przez wiele plików HTML, szukając zbłąkanych SVGów (dlatego styl powinien iść w CSS, a nie w ogóle znaczników)
• zmiana kształtu SVG wymaga zmiany kilku wartości, a potrzebujesz tylko zmień jedną wartość CSS na wszystko, co chcesz zrobić.Reguły CSS są również znacznie bardziej czytelny dla człowieka niż SVG multi-line punktów kontrolnych (może to być subiektywne)

Answer 3

Variant gradientem:

.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

Variant z dwa trójkąty:

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

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