Meine Frage ähnelt dieser Frage:Pfeilbox mit CSS Aber anstatt nur einer Box muss ich mehrere Boxen ausrichten. Und immer noch in der Lage, den Pfeil auf allen Feldern zu sehen.

In diesem Beispiel:http://jsfiddle.net/casperskovgaard/LHHzt/1/ Ich habe zwei Pfeilboxen erstellt, die nach links schweben. Das Problem ist, dass der Pfeil auf dem ersten Feld nicht sichtbar ist.

Wie mache ich den Pfeil sichtbar?

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

BEARBEITEN:

Der erste Pfeil muss das Feld nach rechts überlappen. Siehe Lösung von artSx:http://jsfiddle.net/LHHzt/6/ Bei dieser Lösung fehlt nur die Möglichkeit, mehrere (mehr als zwei) Boxen hinzuzufügen