带有CSS的框之前和之后的箭头

Question

我试图在一个盒子里创建两个箭头,一个作为指针,另一个在后面的盒子里.

找不到让箭头落后的方法.

有人可以帮帮我吗？

在这里,我发布了样本的链接: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>

Answer 1

我更喜欢使用内联块而不是绝对定位.另外,: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;
}

这完全是一个小提琴.