带有 CSS 的框前后的箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20502191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arrow before and after a box with CSS
提问by Apalabrados
I'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind.
我试图在一个盒子中创建两个箭头，一个作为指针，另一个作为后面的盒子。
Can not find the way to get the arrow right behind.
找不到将箭头放在后面的方法。
Someone can help me??
有人可以帮我吗？？
here i post the link with the sample: http://jsfiddle.net/7Esu2/
我在这里发布了带有示例的链接：http: //jsfiddle.net/7Esu2/
CSS:
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:
HTML：
<div class="arrow">
FLECHA
</div>
回答by philwills
I prefer using inline-blocks over absolute positioning. Also, :before and :after create child elements (inside) the element you specify them on (at the beginning and end). For this, it would probably be best to have a wrapper (or inner) block, like so:
我更喜欢使用内联块而不是绝对定位。此外， :before 和 :after 创建子元素（内部）您指定它们的元素（在开始和结束处）。为此，最好有一个包装器（或内部）块，如下所示：
<div class="arrow">
<div class="inner-arrow">
FLECHA
</div>
</div>
Then the inner block is going to get most of the styling, as the wrapper is primarily there to contain the :before and :after. The wrapper (.arrow) needs to have font-size: 0 (or some other method to make the white-space around the inner block, .inner-arrow, go away).
然后内部块将获得大部分样式，因为包装器主要用于包含 :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;
}
Most of the styles for .arrow:before and .arrow:after will be the same, so we'll group those. Then specify the differences below (they have to be below to override the common styles).
.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;
}
This is all in the a fiddle.
这一切都在胡说八道。
