我试图在我的英雄底部有一个三角形/箭头,但它不响应,不能在移动上工作,因为三角形漂浮在右边,并不是绝对居中了。
如何让三角形始终位于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; }
或者如果您需要可变宽度,您可以使用:@L_403_2@
.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; }