CSS chevauchement de la flèche

Je suis en train d'essayer d'accomplir quelque chose de très, très similaire à l'image ci-dessous avec CSS3.

CSS chevauchement de la flèche

La seule différence est que la dernière div aurait un bout pointu.

Dans ma recherche de quelque chose de semblable à adapter, j'en suis venu à travers ce js fiddle qui est très proche de ce que je veux faire, mais présente deux problèmes: tout d'abord, il est fait avec de la toile, et la seconde, il m'oblige à "dessiner" des flèches effectivement deux fois pour chaque flèche, une pour la div, et l'autre pour l'espace avant la flèche suivant. Il doit y avoir une manière plus propre de le faire -- quelqu'un peut-il me donner quelques conseils ici?

Ce que j'ai besoin de savoir, c'est comment construire ce qui est indiqué dans l'image ci-dessus, une série de chevauchement div flèches -- avec CSS3.

est d'utiliser une image de fond pour chacune des flèches n'est pas une option pour les au-dessus? =>|>=>|>= Les flèches ci-dessus ne fait pas de chevauchement.
Je suppose qu'ils ne pourraient pas -- il sorte de ressemble à la fin de chaque flèche répond à la queue de la à côté de moi. Dans les deux cas, je veux faire se chevaucher.

OriginalL'auteur varatis | 2012-06-17

  1. 23

    Essayer ce - 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; 
}
​

    Mis à JOUR - Rendu cliquable et réduit au minimum le chevauchement des domaines - http://jsfiddle.net/ksNr3/8/

    Vous, monsieur, êtes un gentleman et un érudit. Qui a été incroyablement utile.
    Vous êtes les bienvenus 🙂
    Les flèches semblent appartenir à un mauvais élément, car de la façon dont ils se chevauchent. Lorsque vous examinez les éléments avec Firebug, il est mettant en valeur l'espace de chaque élément occupe sur la page, indépendamment de si oui ou non que l'espace est visible pour l'utilisateur. Notez que le :before et :after pseudo-éléments que faire les triangles ne sont pas réellement mis en évidence avec le li éléments. La solution proposée fonctionne comme prévu.
    Ah, mon erreur que je vois ce que tu veux dire maintenant. Vous avez raison, je n'avais pas remarqué ça avant. Les triangles sont faites par les 3 côtés de la frontière transparente, qui sont encore considérés comme faisant partie de l'élément sur mouseover même si elles ne sont pas visibles. Je ne suis pas sûr au sujet d'une solution facile, mais une solution pourrait être de mettre le texte en <a> étiquettes et les joindre mouseover événement? Pas le comportement souhaité, mais au moins il n'y a pas de confusion sur le fil d'ariane vous êtes en vol stationnaire.
    Bien sûr, ici, vous allez: jsfiddle.net/joshnh/ksNr3/9

    OriginalL'auteur Zoltan Toth

  2. 6

    Suivantes CSS3 Solution ne pas utiliser les images et est facile à travailler avec.

    J'ai créé DEUX entièrement commentée des exemples qui peuvent l'être davantage.

    Un exemple a des flèches qui sont "visuellement" empilés les uns contre les autres.

    L'autre exemple est tout comme l'image dans votre Question, avec des "bouchons" sur les flèches.

    Chaque exemple est un simple jQuery .click() écouteur d'événement de sorte que vous pouvez voir n'importe où vous êtes cliquant dans la fil d'ariane, le point d'ancrage recevrez le bon cliquez sur l'événement. Flèche queues de fonctionner correctement.

    Capture d'écran montre active CSS hover pour la barre de navigation du fil d'ariane:

    CSS chevauchement de la flèche

    Lors de la CSS est désactivé dans le navigateur, le fil d'ariane de navigation gracieusement tombe en arrière pour les exigences en matière d'accessibilité.

    Référence:    jsFiddle

    Pour une semblable fil d'Ariane barre de navigation sans le CSS3 Rotation que j'ai fait, voir ce Réponse.

    OriginalL'auteur arttronics