我试图在我的英雄底部有一个三角形/箭头，但它不响应，不能在移动上工作，因为三角形漂浮在右边，并不是绝对居中了。
如何让三角形始终位于div底部的绝对中心？
示例代码：
HTML：
<div class="hero"></div>
CSS：
.hero {
position:relative;
background-color:#e15915;
height:320px !important;
width:100% !important;
}
.hero:after,.hero:after {
z-index: -1;
position: absolute;
top: 98.1%;
left: 70%;
margin-left: -25%;
content: '';
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
解决方法
你不能只是设置为50％，然后将margin-left设置为-25px，因为它的宽度：
http://jsfiddle.net/9AbYc/
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
或者如果您需要可变宽度，您可以使用：http://jsfiddle.net/9AbYc/1/
.hero:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
