对齐css箭头框

Question

我的问题与此问题类似：Arrow Box with 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/只有从这一解决方案缺少的事情是，它应该可以添加多个（两个以上）箱

Answer 1

如果你psudeo元素后更改的的z指数为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;