Мой вопрос похож на этот вопрос:Стрелка с CSS Но вместо одного ящика нужно выровнять несколько ящиков. И все же сможете увидеть стрелки на всех коробках.

В этом примере:http://jsfiddle.net/casperskovgaard/LHHzt/1/ Я создал два поля со стрелками, которые плавают влево. Проблема в том, что стрелка на первом поле не видна.

Как сделать стрелку видимой?

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

РЕДАКТИРОВАТЬ:

Первая стрелка должна перекрывать прямоугольник справа. Смотрите решение от artSx:http://jsfiddle.net/LHHzt/6/ Единственное, чего не хватает в этом решении, так это возможности добавить несколько (более двух) блоков.