对齐css箭头框 [英] Aligning css arrow boxes

问题描述

我的问题与此问题类似：带有CSS的箭头框但不是只有1个框我需要对齐几个框。

在此示例中： http://jsfiddle.net/casperskovgaard/LHHzt/1/ 我创建了两个浮动在左边的箭头框。问题是第一个方框上的箭头不可见。

如何让箭头可见？

HTML：

 < div class =arrow>< / div> 
< div class =arrow>< / div> 
  

CSS：

 code> .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： b

第一个箭头必须与右边的框重叠。查看artSx的解决方案： http://jsfiddle.net/LHHzt/6/ 只有从这里缺少的东西解决方案是应该可以添加几个（两个以上）盒子

解决方案

如果你改变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/

My question is similar to this question: Arrow Box with CSS But instead of only 1 box I need to align several boxes. And still be able to see the arrow on all boxes.

In this example: http://jsfiddle.net/casperskovgaard/LHHzt/1/ I have created two arrow boxes that float to the left. The problem is that the arrow on the first box is not visible.

How do I make the arrow visible?

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:

The first arrow must overlap the box to the right. See solution from artSx: http://jsfiddle.net/LHHzt/6/ Only thing missing from this solution is that it should be possible to add several (more than two) boxes

解决方案

if you change the z-index of the after psudeo element to 2 and then the before element to 1 then it should work as you intend:

.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/

这篇关于对齐css箭头框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！