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.

我试图在我的英雄的底部有一个三角形/箭头，但它没有响应，并且在移动设备上不能很好地工作，因为三角形漂浮到右边并且不再是绝对居中。

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

我怎么能一直将三角形放在div底部的绝对中心？

Example code here:

示例代码在这里：

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

HTML:

HTML：

<div class="hero"></div>

CSS:

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

4 个解决方案

#1

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/

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

or if you needed a variable width you could use: http://jsfiddle.net/9AbYc/1/

或者如果您需要可变宽度，您可以使用：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;
}

#2

You can use following css to make an element middle aligned styled with position: absolute:

您可以使用以下css使元素中间对齐样式与position：absolute：

.element {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}

With CSS having only left: 50% we will have following effect:

只剩下CSS：50％我们会有以下效果：

While combining left: 50% with transform: translate(-50%) we will have following:

合并左：50％与transform：translate（-50％），我们将有以下内容：

.hero { 	
  background-color: #e15915;
  position: relative;
  height: 320px;
  width: 100%;
}


.hero:after {
  border-right: solid 50px transparent;
  border-left: solid 50px transparent;
  border-top: solid 50px #e15915;
  transform: translateX(-50%);
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
}

<div class="hero">

</div>

#3

Check this:

检查一下：

http://jsfiddle.net/SxKr5/3/

http://jsfiddle.net/SxKr5/3/

.hero1
{
    width: 90%;
    height: 200px;
    margin: auto;
    background-color: #e15915;
}

.hero2
{
    width: 0px;
    height: 0px;
    border-style: solid;
    margin: auto;
    border-width: 90px 58px 0 58px;
    border-color: #e15915 transparent transparent transparent;
    line-height: 0px;
    _border-color: #e15915 #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000')
}

#4

You could also use a CSS "calc" to get the same effect instead of using the negative margin or transform properties (in case you want to use those properties for anything else).

您还可以使用CSS“calc”来获得相同的效果，而不是使用负边距或变换属性（如果您想将这些属性用于其他任何内容）。

.hero:after,
.hero:after {
    z-index: -1;
    position: absolute;
    top: 98.1%;
    left: calc(50% - 25px);
    content: '';
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

#1