Aligning css arrow boxes - css

Question

My question is similar to this question: Arrow Box with CSS But instead of only 1 box I need to align several boxes. And still be able to see the arrow on all boxes.
In this example: http://jsfiddle.net/casperskovgaard/LHHzt/1/ I have created two arrow boxes that float to the left. The problem is that the arrow on the first box is not visible.
How do I make the arrow 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:
The first arrow must overlap the box to the right. See solution from artSx: http://jsfiddle.net/LHHzt/6/ Only thing missing from this solution is that it should be possible to add several (more than two) boxes

Answer 1

if you change the z-index of the after psudeo element to 2 and then the before element to 1 then it should work as you intend:
.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

add this :
.arrow:first-child{
z-index:10;
}
JsFiddle with correction

Answer 3

Just add a z-indexto your .arrow:before. Here is the live version 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;
}
Works with as many box as you want :)

Answer 4

try this
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 5

Just add a margin to the arrow...
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
margin-right: 15px;
}
http://jsfiddle.net/LHHzt/11/
Or change z-index to display above if you want them to overlay

Answer 6

Just adding a margin to the arrow resolves the problem.
See this JSFiddle : http://jsfiddle.net/LHHzt/9/
I just added a
margin-right: 15px;