html – css活跃LI的箭头与身体图像背景?

发布时间:2020-08-11 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – css活跃LI的箭头与身体图像背景?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我的目标是隐藏三角形下面的线,以便在我的活动菜单上显示_____ ^ _____.
    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);
}

总结

以上是编程之家为你收集整理的html – css活跃LI的箭头与身体图像背景?全部内容,希望文章能够帮你解决html – css活跃LI的箭头与身体图像背景?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!