对齐css箭头框
对齐css箭头框
提问于 2013-06-28 21:51:00
我的问题类似于这个问题：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/这个解决方案中唯一缺少的是应该可以添加几个(两个以上)框
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-06-28 22:18:54
如果您将后面的psudeo元素的z-index更改为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;
}Stack Overflow用户
发布于 2013-06-28 21:53:36
Stack Overflow用户
发布于 2013-06-28 21:53:48
只需在.arrow:before中添加一个z-index即可。这是实时版本的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;
}可以使用任意数量的方框:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17366272
复制相关文章
相似问题