中心三angular在底部

我试图在我的英雄底部有一个三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; } 

Answer 2

检查这个：

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') } 

Answer 3

你可以使用下面的CSS来使一个元素中间alignment样式的position: absolute ：

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

只剩left: 50% CSS的left: 50%我们会有以下的效果：

结合left: 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>