我的目标是隐藏三角形下面的线,以便在我的活动菜单上显示_____ ^ _____.
stackoverflow上也有类似的问题,但这些解决方案并没有解决我目前的问题.请帮我玩吧.谢谢!
FIDDLE在这里.
stackoverflow上也有类似的问题,但这些解决方案并没有解决我目前的问题.请帮我玩吧.谢谢!
FIDDLE在这里.
body { background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg); } ul { width:100%; border-bottom:3px solid red } li { display:inline-block;padding:20px; } li a { display:block;position:relative; } li.active a:after { content:""; width:15px; height:15px; position:absolute; top:100%; left:0; right:0; margin:12px auto 0; border:solid red; border-width:3px 3px 0 0; -moz-transform:rotate(315deg); -webkit-transform:rotate(315deg); -ms-transform:rotate(315deg); }
<ul> <li><a href="#">LINK1</a></li> <li><a href="#">LINK2</a></li> <li class="active"><a href="#">LINK3</a></li> <li><a href="#">LINK4</a></li> </ul>
解决方法
这个CSS代码将修复它:
更新小提琴:
http://jsfiddle.net/L786rqfs/6/
您需要将边框带到LI并在内容的前后左右两侧进行切割.为了画龙点睛,我还在内容之后为UL带来了边框,让你在页面上保持100%.
body { background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg); } ul { overflow: hidden; /* Clear float and hide ul:after content overflow */ position: relative; /* Relative for ul:after content */ width: 100%; } ul:after { content: ""; border-bottom: 3px solid red; bottom: 0; position: absolute; /* Now it will start after the last LI */ width: 100%; } li { float: left; padding: 20px; position: relative; } li:before,li:after { content: ""; border-bottom: 3px solid red; bottom: 0; position: absolute; width: 50%; } li:before { left: 0; } li:after { right: 0; } li.active:before,li.active:after { width: calc(50% - 8px); /* Transparent part of the arrow */ } li a { display: block; position: relative; } li.active a:after { content: ""; width: 15px; height: 15px; position: absolute; top: 100%; left: 0; right: 0; margin: 12px auto 0; border: solid red; border-width: 3px 3px 0; -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -ms-transform: rotate(315deg); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。