Freccia sovrapposta CSS

Sto cercando di realizzare qualcosa di molto, molto simile alla foto qui sotto con solo CSS3.Freccia sovrapposta CSS

enter image description here

L'unica differenza è che l'ultimo div avrebbe una punta aguzza.

Nella mia ricerca di qualcosa di simile adattare, mi sono imbattuto in this js fiddle che si avvicina molto a quello che voglio fare, ma introduce due problemi: in primo luogo, è fatto con la tela, e in secondo luogo, mi costringe a " disegna "frecce in modo efficace due volte per ogni freccia - una per il div e una per lo spazio prima della freccia successiva. Deve esserci un modo più pulito per farlo: qualcuno può darmi qualche indicazione qui?

Quello che ho bisogno di sapere è come costruire ciò che è mostrato nella figura sopra - una serie di frecce div sovrapposte - solo con CSS3.

fonte

2012-06-17 varatis

sta usando un'immagine di sfondo per ognuna delle frecce non è un'opzione per quanto sopra? => |> => |> = Le frecce sopra non si sovrappongono effettivamente. –

@marabutt Immagino che non potrebbero - sembra quasi che la fine di ogni freccia incontri la coda del vicino a me però. In entrambi i casi voglio fare una sovrapposizione. – varatis

Prova questo - 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; 
}

AGGIORNATO - Made è cliccabile e ridotto al minimo le aree di sovrapposizione - http://jsfiddle.net/ksNr3/8/

fonte

2012-06-17 22:13:37

Lei signore, sono un gentiluomo e uno studioso. E 'stato incredibilmente utile. – varatis

Siete i benvenuti :) –

@arttronics Le frecce sembrano appartenere all'elemento sbagliato a causa del modo in cui si sovrappongono.Quando si ispezionano gli elementi con Firebug, viene evidenziato lo spazio che ogni elemento occupa nella pagina, indipendentemente dal fatto che lo spazio sia visibile all'utente. Si noti che ': before' e': after' [pseudo-elementi] (http://www.w3schools.com/css/css_pseudo_elements.asp) che rendono i triangoli non effettivamente evidenziati con gli elementi 'li'. La soluzione suggerita funziona come previsto. – Zhihao

la seguente soluzione CSS3 non utilizza le immagini ed è facile da lavorare .

Ho creato TWO esempi completamente commentati che possono essere ulteriormente espansi.

Un esempio ha frecce "visivamente" accatastate l'una contro l'altra.

L'altro esempio è proprio come l'immagine nella domanda, con "estremità" sulle frecce.

Ogni esempio ha un semplice jQuery .click() listener di eventi così si può vedere, non importa dove si fa clic nel breadcrumb, l'ancora riceverà il corretto evento click. Le frecce della freccia funzionano correttamente.

schermata mostra hover CSS attivo per breadcrumb di NavBar:

enter image description here

Quando CSS è disabilitato nel browser, la navigazione breadcrumb cade con grazia posteriore per i requisiti di accessibilità.

Riferimento: jsFiddle

fonte

2012-07-01 13:09:01 arttronics

Per un simile ** NavbAR breadcrumb ** senza la rotazione CSS3 che ho creato, vedere questo [** SO Answer **] (http://stackoverflow.com/a/11218781/1195891). – arttronics

Freccia sovrapposta CSS

risposta

Problemi correlati