CSS superposición flecha

Estoy tratando de lograr algo muy, muy similar a la imagen de abajo con CSS3 solamente.CSS superposición flecha

enter image description here

La única diferencia es que el último div tendría una punta afilada.

En mi búsqueda de algo similar para adaptarme, he encontrado this js fiddle que se acerca mucho a lo que quiero hacer, pero introduce dos problemas: primero, está hecho con lienzo, y segundo, me obliga a " dibuje "flechas efectivamente dos veces para cada flecha, una para el div y otra para el espacio antes de la flecha siguiente. Tiene que haber una manera más limpia de hacer esto: ¿alguien me puede dar alguna dirección aquí?

Lo que necesito saber es cómo construir lo que se muestra en la imagen de arriba - una serie de flechas div superpuestas - con CSS3 solamente.

Fuente

2012-06-17 varatis

una imagen de fondo está utilizando para cada una de las flechas no es una opción para el anterior? => |> => |> = Las flechas de arriba no se superponen. –

@marabutt Supongo que no es así - parece que el final de cada flecha se encuentra con la cola del que está a mi lado. En cualquier caso, quiero hacer una superposición. – varatis

Prueba esto - 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; 
}

ACTUALIZADO - Hecho que se puede hacer clic y minimizar las áreas de solapamiento - http://jsfiddle.net/ksNr3/8/

Fuente

2012-06-17 22:13:37

Usted señor, es un caballero y un erudito. Eso fue increíblemente útil. – varatis

De nada :) –

@arttronics Las flechas parecen pertenecer al elemento incorrecto debido a la forma en que se superponen.Cuando inspecciona los elementos con Firebug, se resalta el espacio que ocupa cada elemento en la página, independientemente de si el espacio es visible o no para el usuario. Observe que ': before' y': after' [pseudo-elements] (http://www.w3schools.com/css/css_pseudo_elements.asp) que hacen que los triángulos en realidad no estén resaltados con los elementos 'li'. La solución sugerida está funcionando según lo previsto. – Zhihao

la siguiente solución CSS3 no utiliza ninguna imagen y es fácil trabajar con él .

He creado TWO ejemplos completamente comentados que pueden ampliarse más.

Un ejemplo tiene flechas que están "visualmente" apiladas una contra la otra.

El otro ejemplo es al igual que la imagen en su pregunta, con "tapas" en las flechas.

Cada ejemplo tiene un simple jQuery .click() detector de eventos para que pueda ver sin importar dónde se está haciendo clic en el pan rallado , el ancla recibirá el evento de clic correcta. Las colas de flechas funcionan correctamente.

captura de pantalla muestra la libración CSS activo para la migaja de pan de barra de navegación:

enter image description here

Cuando CSS está desactivado en el navegador, la ruta de navegación con gracia en verano para los requisitos de accesibilidad.

Referencia: jsFiddle

Fuente

2012-07-01 13:09:01 arttronics

Por un similar ** Breadcrumb NavBAR ** sin la rotación CSS3 que hice, vea esto [** SO Answer **] (http://stackoverflow.com/a/11218781/1195891). – arttronics

Respuesta

Cuestiones relacionadas