我试图在我的英雄底部有一个三角形/箭头,但它不响应,不能在移动上工作,因为三角形漂浮在右边,并不是绝对居中了。
如何让三角形始终位于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; }
或者如果您需要可变宽度,您可以使用: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; }
原文地址:https://www.jb51.cc/css/221435.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。