Nakładanie CSS strzałka

Próbuję wykonać coś bardzo, bardzo podobnego do poniższego obrazu tylko z CSS3.Nakładanie CSS strzałka

enter image description here

Jedyną różnicą jest to, że ostatni div miałby spiczasta.

W moim poszukiwaniu czegoś podobnego do dostosowania, Natknąłem this js fiddle która jest bardzo zbliżona do tego, co chcę zrobić, ale wprowadza dwa problemy: po pierwsze, jest to zrobione z płótna, a po drugie, to zmusza mnie do " narysuj "strzałki skutecznie dwa razy dla każdej strzały - jedna dla div, a druga dla spacji przed następną strzałką. Musi istnieć jakiś bardziej przejrzysty sposób robienia tego - czy ktoś może mi tu podać jakiś kierunek?

Co muszę wiedzieć, jak skonstruować to, co pokazano na powyższym obrazku - seria nakładających się strzałek div - tylko z CSS3.

Źródło

2012-06-17 varatis

jest za pomocą obrazu tła dla każdej ze strzałek nie jest opcją dla powyższych? => |> => |> = Powyższe strzałki w rzeczywistości nie pokrywają się. –

@marabutt Myślę, że mogą nie - wygląda na to, że koniec każdej strzały spotyka się z ogonem obok mnie. W obu przypadkach chcę się pokrywać. – varatis

Spróbuj tego - 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; 
}

UPDATED - Made to klikalne i zminimalizować zachodzące na siebie obszary - http://jsfiddle.net/ksNr3/8/

Źródło

2012-06-17 22:13:37

Jesteś panem, jesteś dżentelmenem i uczonym. To było niewiarygodnie pomocne. – varatis

Serdecznie zapraszamy :) –

@arttronics Strzałki wydają się należeć do niewłaściwego elementu, ponieważ zachodzą na siebie.Podczas sprawdzania elementów za pomocą narzędzia Firebug podświetlona jest przestrzeń zajmowana przez każdy element na stronie, niezależnie od tego, czy jest ona widoczna dla użytkownika. Zauważ, że ': before' i': after' [pseudoelementy] (http://www.w3schools.com/css/css_pseudo_elements.asp), które sprawiają, że trójkąty nie są faktycznie wyróżnione elementami 'li'. Sugerowane rozwiązanie działa zgodnie z przeznaczeniem. – Zhihao

Poniższy CSS3 Rozwiązanie nie używać żadnych obrazów i jest wygodny w użyciu .

Utworzyłem TWO w pełni skomentowałem przykłady, które można dalej rozwinąć.

Jednym z przykładów są strzałki "wizualnie" ułożone jedna na drugiej.

Innym przykładem jest , podobnie jak obrazek w pytaniu, z "końcówkami" na strzałkach.

Każdy przykład jest prosty jQuery .click() słuchacza zdarzeń, dzięki czemu można zobaczyć nie ważne gdzie jesteś klikając w breadcrumb, kotwica otrzyma prawidłową zdarzenie click. Strzałowe ogony działają poprawnie.

ekranu pokazuje aktywną CSS najechania kursorem na breadcrumb NavBar za:

enter image description here

Gdy CSS jest wyłączona w przeglądarce, nawigacja breadcrumb łagodnie opada do wymogów dostępności.

referencyjny: jsFiddle

Źródło

2012-07-01 13:09:01 arttronics

Dla podobnego ** Nawigacja NavBAR ** bez rotacji CSS3, którą zrobiłem, patrz [** SO Odpowiedź **] (http://stackoverflow.com/a/11218781/1195891). – arttronics

Nakładanie CSS strzałka

Odpowiedz

Powiązane problemy