我正在尝试为活动/所选菜单创建内部曲线边框。下面的代码片段是我能做的最好的,方角不应该是可见的。谷歌的解决方案似乎没有帮助...请帮助我玩它。多谢你们!
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;
border-radius: 0 8px;
border-width:0 0 1px 1px;
}
.content {
border:1px solid #aaa;background:#fff;height:200px
}

<ul>
<li><a href="#">tab 1</a></li>
<li class="active"><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
<div class="content"></div>
&#13;
答案 0 :(得分:8)
到目前为止,这是我的解决方案。但我希望有一个更好的解决方案...我使用活动a
的伪元素来创建一个白色边框来隐藏锐角。
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:50% 0;
border-width:0 1px 1px 0;
box-shadow: 1px 1px white;
}
ul li.active:after {
right:-10px;
border-radius: 0 50%;
border-width:0 0 1px 1px;
box-shadow: -1px 1px white;
}
.content {
border:1px solid #aaa;background:#fff;height:200px
}
&#13;
<ul>
<li><a href="#">tab 1</a></li>
<li class="active"><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
<div class="content"></div>
&#13;
更新:我之前的回答需要更多的CSS,所以我编辑了它。基于jbutler的答案,我得到了添加box-shadow
来隐藏角落的想法。我在这里介绍的原始CSS没有太大变化,我刚刚添加了盒子阴影。更新了小提琴HERE。
答案 1 :(得分:5)
您可以尝试使用白色方块:before
和:after
li.active a
元素,并将其定位在半径和li
之间:
ul li.active a:before,
ul li.active a:after {
content: "";
position: absolute;
background-color: white;
height: 11px;
width: 10px;
bottom: -1px;
}
ul li.active a:before {
left: -6px;
z-index: 1;
}
ul li.active a:after {
right: -6px;
background-color: white;
z-index: 6;
}
ul li.active:before {
left:-10px;
border-radius:8px 0;
border-width:0 1px 1px 0;
z-index: 5; // <<< This too
}
ul li.active:after {
right:-10px;
border-radius: 0 8px;
border-width:0 0 1px 1px;
z-index: 10; // <<< And here
}
http://jsfiddle.net/be5ceL9z/4/
这基本上只是覆盖了li.active
和#content
元素的方形底角,通过操纵小方块元素来覆盖它们,但是位于边界半径li.active:before
之下:after
。
更彻底的解释(由atomictom的答案提供):
答案 2 :(得分:2)
这是一个如何通过旋转和框阴影的组合实现这一点的例子:
最初,你有你的矩形div /元素:
+---------+
| ELEMENT |
+---------+
从那里,你可以在底角的两侧定位一个伪元素,边界半径为50%(制作一个圆圈)
+---------+
| ELEMENT |
O+---------+O
因为我没有设置背景颜色,所以你不会看到它。
我在两者上都设置了一个边框,但是然后将三种侧面颜色设置为“透明”(所以你只能看到一个边框)。
旋转这意味着您可以为每一侧制作“弯角边框”:
+---------+
| ELEMENT |
)+---------+(
使用框阴影意味着你可以隐藏'元素底角':
+---------+
| ELEMENT |
) --------- (
然后将底部边框颜色设置为活动的elelemtn本身意味着它仍然是“隐藏”的:
+---------+
| ELEMENT |
) ( <-- rotated slightly to create your corner
/*FOR DEMO ONLY*/
$(document).ready(function() {
$('.menu div').click(function() {
$('.menu div').removeClass("act");
$(this).addClass("act");
});
});
html {
background: lightgray;
}
.menu div {
display: inline-block;
height: 50px;
width: 100px;
background: white;
margin: 10px;
position: relative;
text-align: center;
border-radius: 10px 10px 0 0;
border: 2px solid black;
cursor:pointer;
}
.menu .act {
border-bottom-color: white;
z-index: 40;
}
.act:before,
.act:after {
content: "";
position: absolute;
bottom: -2px;
height: 20px;
width: 20px;
border-radius: 50%;
border: 2px solid transparent;
z-index: 30;
}
.act:before {
left: 100%;
border-left-color: black;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
transform: rotate(-40deg);
box-shadow: -20px 2px 0 0 white;
}
.act:after {
right: 100%;
border-right-color: black;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
transform: rotate(40deg);
box-shadow: 20px 2px 0 0 white;
}
.panel {
width: 80vw;
margin-top: -12px;
background: white;
border-top: 2px solid black;
z-index: 20;
padding-top: 12px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div>1</div>
<div class="act">2</div>
<div>3</div>
</div>
<div class="panel">Don't you wish Tabs could just be easy?</div>
注意强>
此处包含的jquery仅用于演示,并显示了如何“切换标签”。
答案 3 :(得分:1)