我正在尝试为活动/选定菜单创建内部弯曲边框.下面的代码片段是我能做的最好的,方角不应该是可见的.谷歌的解决方案似乎没有帮助...请帮我玩它.多谢你们!
body {
background:#eee;width:90%;margin:20px auto
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
vertical-align:bottom;
}
ul li a {
padding: 10px 15px;
display: block;
line-height: 25px;
margin-bottom:-1px;
}
ul li.active a {
background:#fff;
border:1px solid #aaa;
border-bottom:0;
border-radius:5px 5px 0 0;
}
ul li.active:before,
ul li.active:after {
content:"";
position:absolute;
bottom:-1px;
width:10px;
height:10px;
border:solid #aaa;
}
ul li.active:before {
left:-10px;
border-radius:8px 0;
border-width:0 1px 1px 0
}
ul li.active:after {
right:-10px; …我的目标是隐藏三角形下面的线,以便在我的活动菜单上显示_____ ^ _____.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>