中心三角在分区的底部 [英] Center Triangle at Bottom of Div

问题描述

我想在我的英雄底部有一个三角形/箭头，但它不响应，不能在移动上工作，因为三角形向右漂移，并且不再是中心。

I am trying to have a triangle/arrow at the bottom of my hero but it is not responsive and doesn't work on mobile very well as the triangle floats off to the right and is not absolutely centered anymore.

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

How could I keep the triangle positioned in the absolute center at the bottom of the div at all times?

示例代码这里：

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

推荐答案

left 到 50％，然后设置 margin-left 到 -25px 以说明其宽度： http://jsfiddle.net/9AbYc/

Can't you just set left to 50% and then have margin-left set to -25px to account for it's width: 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/

or if you needed a variable width you could use: 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;
}

这篇关于中心三角在分区的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！