css before 箭头,css3 – 带有CSS的框之前和之后的箭头

我更喜欢使用内联块而不是绝对定位.另外,：before和：在创建子元素(内部)后,指定它们的元素(在开头和结尾).为此,最好有一个包装器(或内部)块,如下所示：

FLECHA

然后内部块将获得大部分样式,因为包装器主要包含：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.