我试图在一个盒子里创建两个箭头,一个作为指针,另一个在后面的盒子中.
找不到让箭头落后的方法.
有人可以帮帮我吗？
在这里,我发布了样本的链接：http://jsfiddle.net/7Esu2/
CSS：
.arrow {
width:210px;
height:40px;
background-color:#CBCBCB;
border: 1px solid #CBCBCB;
position:relative;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
}
.arrow:after {
content:'';
position:absolute;
top:-1px;
left:210px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
.arrow:before {
content:'';
position:absolute;
top:-1px;
left:211px;
width:0;
height:0;
border:21px solid transparent;
border-left:15px solid #CBCBCB;
}
HTML：
<div class="arrow">
FLECHA
</div>
解决方法
我更喜欢使用内联块而不是绝对定位.另外,：before和：在创建子元素(内部)后,指定它们的元素(在开头和结尾).为此,最好有一个包装器(或内部)块,如下所示：
<div class="arrow">
<div class="inner-arrow">
FLECHA
</div>
</div>
然后内部块将获得大部分样式,因为包装器主要包含：before和：after.包装器(.arrow)需要有font-size：0(或其他方法来使内部块周围的空白区域,.inner-arrow,消失).
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:40px;
display: inline-block;
background-color:#CBCBCB;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:40px;
vertical-align: middle;
}
.arrow：before和.arrow：after的大多数样式都是相同的,所以我们将这些样式分组.然后指定下面的差异(它们必须在下面以覆盖常见样式).
.arrow:before,.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:20px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: #CBCBCB;
border-bottom-color: #CBCBCB;
border-right-color: #CBCBCB;
}
.arrow:after {
border-left-color: #CBCBCB;
}
这一切都在fiddle.
