Aligner des boîtes de flèches css

Question

Ma question est similaire à cette question: Arrow Box with CSS Mais au lieu d'une seule boîte j'ai besoin d'aligner plusieurs boîtes. Et encore être en mesure de voir la flèche sur toutes les cases.

Dans cet exemple: http://jsfiddle.net/casperskovgaard/LHHzt/1/ J'ai créé deux boîtes de flèches qui flottent vers la gauche. Le problème est que la flèche sur la première case n'est pas visible.

Comment rendre la flèche visible?

HTML:

<div class="arrow"></div> 
<div class="arrow"></div> 

CSS:

.arrow { 
    float: left; 
    width: 128px; 
    height: 100px; 
    background-color: #f0f0f0; 
    border: 1px solid #999; 
    position: relative; 
} 
.arrow:after { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 128px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-left: 12px solid #f0f0f0; 
} 
.arrow:before { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 129px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-left: 12px solid #999; 
} 

EDIT:

La première flèche doit chevaucher la boîte à droite. Voir la solution de artSx: http://jsfiddle.net/LHHzt/6/ La seule chose qui manque à cette solution est qu'il devrait être possible d'ajouter plusieurs (plus de deux) boîtes

Answer 1

si vous changez le z-index de l'après élément psudeo à 2, puis l'avant élément 1, alors il faut travailler vous avez l'intention:

.arrow { 
    float: left; 
    width: 128px; 
    height: 100px; 
    background-color: #f0f0f0; 
    border: 1px solid #999; 
    position: relative; 
    margin-right:15px; 
} 
.arrow:after { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 128px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-left: 12px solid #f0f0f0; 
} 
.arrow:before { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 129px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-left: 12px solid #999; 
} 

http://jsfiddle.net/peteng/LHHzt/15/

Answer 2

essayer

http://jsfiddle.net/casperskovgaard/LHHzt/1/

.arrow { 
    width: 128px; 
    height: 100px; 
    background-color: #f0f0f0; 
    border: 1px solid #999; 
    position: relative; 
} 
.arrow:after { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 128px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-left: 12px solid #f0f0f0; 
} 
.arrow:before { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 129px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-left: 12px solid #999; 
} 

Answer 3

ajouter ceci:

.arrow:first-child{ 
z-index:10; 
} 

JsFiddle with correction

Answer 4

Il suffit d'ajouter un z-index à votre .arrow:before. Voici la version live http://jsfiddle.net/LHHzt/13/

.arrow:before { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    left: 129px; 
    width: 0; 
    height: 0; 
    z-index:2; 
    border: 50px solid transparent; 
    border-left: 12px solid #999; 
} 

Fonctionne avec autant boîte que vous voulez :)

Answer 5

il suffit d'ajouter un margin à la flèche ...

.arrow { 
    float: left; 
    width: 128px; 
    height: 100px; 
    background-color: #f0f0f0; 
    border: 1px solid #999; 
    position: relative; 
    margin-right: 15px; 
} 

http://jsfiddle.net/LHHzt/11/

Ou modifiez z-index pour afficher ci-dessus si vous souhaitez les superposer

Answer 6

L'ajout d'une marge à la flèche résout le problème.

Voir cette jsFiddle: http://jsfiddle.net/LHHzt/9/

Je viens d'ajouter un

margin-right: 15px;