css Clip Pfad Alternative

Ich versuche, ein Banner für meine Website zu tun, ein bisschen anders.css Clip Pfad Alternative

Ich will unteren Rand, eine Art zu sein "Pfeil nach unten"

So etwas wie folgt aussehen: JS FIDDLE

.indexBanner { 
 
    background-image: url('https://i.stack.imgur.com/dFUnt.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-color: #404040; 
 
    height: 500px; 
 
    position: relative; 
 
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%, 0 0); 
 
}

<div class="indexBanner"></div>

Aber zur Zeit Clip-Weg, den ich verwende, die wird von Firefox und IE nicht unterstützt. Und auch Sie können sehen, dass die "pfeilförmige" Grenze ein bisschen chaotisch ist.

Ich habe auch versucht transform: skew in diesem Fall das Ergebnis war eher eine Art "Chat-Blase" Art von Effekt.

Gibt es eine Möglichkeit, dies zu tun, weil ich keine Ideen habe.

Quelle

2016-06-11 Sebastjan

Sie können den in dieser Antwort erwähnten "skew" -Ansatz verwenden - http://stackoverflow.com/questions/30368404/how-to-create-a-polygon-shape-div/30370429#30370429. Ich verstehe nicht, was Sie mit "Chat-Blase" -Effekt gemeint haben. Vielleicht, wenn Sie ein Demo zeigen, kann ich helfen, es fein abzustimmen. SVG wäre jedoch die beste Wahl. – Harry

Prüfen Sie [this] (https://jsfiddle.net/alireza_safian/qkvz8z1j/10/) – Alex

Beachten Sie, dass Firefox 'Clip-Pfad' mit einem Verweis auf ein SVG' 'Element für Alter und mit grundlegenden Formen wie unterstützt hat Polygon für etwa ein Jahr (ohne Präfix). Es benötigt das Flag 'layout.css.clip-path-shapes.enabled', das auf' true' in 'about: config' gesetzt ist, um zu funktionieren. – Ana

Ich habe versucht, die Pfeil-Grenze zu ändern, um weniger chaotisch auszusehen.

https://jsfiddle.net/night11/b7ch05Ln/ -

aktualisiert

-webkit-clip-path: polygon(0 1%, 100% 0, 100% 60%, 50% 100%, 0 60%);

Quelle

2016-06-11 12:31:26 night11

Bitte überprüfen Sie Ihren Link. Ich schätze, das ist ein anderes Thema. –

Danke für die Aufmerksamkeit :) – night11

https://jsfiddle.net/glebkema/h18w341m/

.indexBanner { 
 
    background-image: url('http://nauci.se/Flipo/assets/images/study.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-color: #404040; 
 
    height: 500px; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
.indexBanner:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50vw solid white; 
 
    border-right: 50vw solid white; 
 
    border-top: 15vw solid transparent; 
 
}

<div class="indexBanner"> 
 
</div>

Quelle

2016-06-11 13:24:41

-2

Versuchen Sie nicht, es mit nur Teillösungen verkomplizieren. Der beste Weg ist ein Weg, der seit IE 4.0 unterstützt wird! Verwenden Sie einfach das Bereichs-Tag mit der Polygonform und den Koordinaten Ihres Pfades. More info here.

Quelle

2017-05-18 16:33:15

Antwort

Verwandte Themen