html - Div 底部的中心三 Angular 形

Question

我想在我的英雄底部添加一个三 Angular 形/箭头，但它没有响应并且在移动设备上效果不佳，因为三 Angular 形向右浮动并且不再绝对居中。

如何让三 Angular 形始终位于 div 底部的绝对中心？

此处示例代码:

http://jsfiddle.net/SxKr5/1/

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;
}

Answer 1

你不能只将 left 设置为 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;
}