CSS überlappender Pfeil
Ich versuche, etwas sehr, sehr ähnliches dem unten stehenden Bild nur mit CSS3 zu erreichen.
Der einzige Unterschied ist, dass das letzte div eine spitze Spitze hat.
Auf meiner Suche nach etwas Ähnlichem, um mich anzupassen, bin ich auf diese js Geige gestoßen, die sehr nahe kommt was ich tun möchte, führt aber zwei Probleme ein: erstens, es ist mit Leinwand gemacht, und zweitens zwingt es mich, Pfeile effektiv zweimal für jeden Pfeil zu zeichnen - einen für das Div und einen für das Leerzeichen vor dem nächsten Pfeil . Es muss einen saubereren Weg geben, dies zu tun - kann mir jemand hier eine Richtung geben?
Was ich wissen muss, ist zu konstruieren, was im obigen Bild gezeigt wird - eine Reihe von überlappenden div-Pfeilen - nur mit CSS3.
2 Antworten
Die folgende CSS3-Lösung verwendet keine Bilder und ist einfach zu verwenden.
Ich habe ZWEI vollständig kommentierte Beispiele erstellt, die weiter erweitert werden können.
Ein Beispiel hat Pfeile, die "visuell" übereinander gestapelt sind.
Das andere Beispiel ist genau wie das Bild in Ihrer Frage, mit "Endkappen" auf den Pfeilen.
Jedes Beispiel hat einen einfachen jQuery .click() -Ereignis-Listener, so dass Sie sehen können, egal wo Sie in breadcrumb klicken, der Anker erhält das richtige Klickereignis. Pfeilschwänze funktionieren korrekt.
Screenshot zeigt den aktiven CSS-Hover für den Breadcrumb von NavBar:
Wenn CSS im Browser deaktiviert ist, greift die Breadcrumb-Navigation auf Barrierefreiheitsanforderungen zurück.
Referenz: jsFiddle