CSS überlappenden Pfeil

Question

Ich versuche, etwas sehr, sehr ähnlich zu dem Bild unten nur mit CSS3 zu erreichen.

Der einzige Unterschied ist, dass der letzte div eine Spitze haben würde.

Auf meiner Suche nach etwas Ähnliches anzupassen, bin ich auf this js fiddle gestoßen, was sehr nahe kommt, was ich tun möchte, aber führt zwei Probleme ein: erstens ist es mit Leinwand gemacht, und zweitens zwingt es mich zu zeichne "Pfeile effektiv zweimal für jeden Pfeil - einen für das Div und einen für das Feld vor dem nächsten Pfeil. Es muss einen saubereren Weg geben, dies zu tun - kann mir jemand eine Richtung geben?

Was ich wissen muss ist, wie man das, was im obigen Bild gezeigt wird - eine Reihe von überlappenden div-Pfeilen - nur mit CSS3 konstruiert.

Answer 1

Try this - http://jsfiddle.net/ksNr3/8/

ul { 
    margin: 20px 60px; 
} 

ul li { 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 
    width: 100px; 
    margin: 5px 1px 0 0; 
    text-indent: 35px; 
    position: relative; 
} 

ul li:before { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: -2px; 
    border-style: solid; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #fff; 
    z-index: 0; 
} 

ul li:first-child:before { 
    border-color: transparent; 
} 

ul li a:after { 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    right: -15px; 
    border-style: solid; 
    border-width: 15px 0 15px 15px; 
    border-color: transparent transparent transparent #ccc; 
    z-index: 10; 
} 

ul li.active a { 
    background: orange; 
    z-index: 100; 
} 

ul li.active a:after { 
    border-left-color: orange; 
} 

ul li a { 
    display: block; 
    background: #ccc; 
} 

ul li a:hover { 
    background: pink; 
} 

ul li a:hover:after { 
    border-color: transparent transparent transparent pink; 
} 
​ 

AKTUALISIERT - Made es anklickbare und minimiert die Überlappungsbereiche - http://jsfiddle.net/ksNr3/8/

Answer 2

Die folgende CSS3 Lösung keine Bilder nicht verwendet und ist einfach zu handhaben .

Ich habe erstellt TWO vollständig kommentierte Beispiele, die weiter ausgebaut werden können.

Ein Beispiel hat Pfeile, die "visuell" gegeneinander gestapelt sind. Das andere Beispiel ist genauso wie das Bild in Ihrer Frage, mit "Endkappen" auf den Pfeilen.

Jedes Beispiel hat einen einfachen jQuery .click() Ereignis-Listener, so dass Sie ganz gleich sehen kann, wo Sie in den Brotkrümel sind, klicken, wird der Anker das richtige Klick-Ereignis erhalten. Pfeilschwänze funktionieren korrekt.

Screenshot zeigt aktive CSS-Hover für NavBar des Brotkrümel:

Wenn CSS im Browser deaktiviert ist, fällt die Brotkrumennavigation anmutig zurück für Anforderungen an die Barrierefreiheit.

Referenz:       jsFiddle