Выравнивание css arrow boxes

Question

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

В этом примере: 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; 
} 

EDIT:

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

Answer 1

если изменить Z-индекс из после psudeo элемента 2, а затем, прежде чем элемент к 1, то он должен работать вы намерены:

.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

попробовать это

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

добавить следующее:

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

JsFiddle with correction

Answer 4

Просто добавьте z-index в ваш .arrow:before. Вот живая версия 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; 
} 

Работает с, как многие коробки, как вы хотите :)

Answer 5

Просто добавьте margin стрелке ...

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

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

Или изменить z-index, чтобы отобразить выше, если вы хотите, чтобы они накладывались

Answer 6

Простое добавление поля к стрелке устраняет проблему.

Смотреть это JSFiddle: http://jsfiddle.net/LHHzt/9/

Я просто добавил

margin-right: 15px;