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

添加：

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

JsFiddle with correction

Answer 2

只需向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 3

如果你将after伪元素的z-index更改为2，然后将before元素更改为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 4

试试这个

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

只需在箭头中添加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;

对齐CSS箭头框

6 个答案: