0

我的问题类似于这个问题：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;
}

编辑：

第一个箭头必须与右侧的框重叠。请参阅 artSx 的解决方案：http: //jsfiddle.net/LHHzt/6/此解决方案中唯一缺少的是应该可以添加多个（两个以上）框

4

6 回答 6

1

添加这个：

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

JsFiddle 修正

于 2013-06-28T13:53:35.797 回答
1

只需在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;
}

可以使用任意数量的盒子:)

于 2013-06-28T13:53:47.647 回答
1

如果您将 after psudeo 元素的 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/

于 2013-06-28T14:18:54.117 回答
0

只需在箭头上添加边距即可解决问题。

看到这个 JSFiddle：http: //jsfiddle.net/LHHzt/9/

我刚刚添加了一个

margin-right: 15px;
于 2013-06-28T13:55:26.943 回答
0

尝试这个

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;
}
于 2013-06-28T13:53:00.073 回答
0

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如果您希望它们覆盖，则更改为显示在上方

于 2013-06-28T13:54:43.787 回答