Transparenter Pfeil zwischen 2 <sections>

Wie mache ich einen transparenten Pfeil zwischen 2 Abschnitten? Beide Abschnitte haben ihr Hintergrundbild und mit background-size: cover.Transparenter Pfeil zwischen 2 <sections>

Ein Beispiel:

Ich habe für verschiedene Methoden untersucht, aber die meisten fand ich sind in der Regel making of a transparent arrow across a single image oder Herstellung von CSS triangle, von denen beide ich glaube, für diesen Fall nicht funktionieren.

A snippet on what I have so far. Mir würde es gut gehen, auch wenn es keine reine CSS-Lösung ist, aber ich finde keinen Weg, es mit variabler Breite zuverlässig zu machen.

Quelle

2016-05-21 uzyn

Dies kann auch hilfreich sein (geschrieben vor dem Clipping in CSS wurde im Allgemeinen unterstützt - ältere Browser werden nicht unterstützt): https://stackoverflow.com/questions/18659926/creating-a- transparent-inner-notch/18664225 # 18664225 – K3N

Es gibt clip-path Eigenschaft in CSS. Support ist nicht sehr gut, aber es funktioniert.

section { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.first { 
 
    background: red; 
 
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 60% 85%, 50% 100%, 40% 85%, 0 85%); 
 
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 60% 85%, 50% 100%, 40% 85%, 0 85%); 
 
} 
 

 
.second { 
 
    background: green; 
 
    margin-top: -30px; 
 
}

<section class="first"></section> 
 
<section class="second"></section>

Ein weiterer woy wäre SVG Element zu verwenden für Hintergrundbild cliping. Schauen Sie auch in eine andere Frage: Transparent arrow/triangle

Quelle

2016-05-21 10:51:26

Das funktioniert sehr gut! Vielen Dank! – uzyn

Transparenter Pfeil zwischen 2 <sections>

Antwort

Verwandte Themen