将内角弯曲边框添加到活动菜单

Question

我正在尝试为活动/选定菜单创建内弯曲边框。下面的片段是迄今为止我能做的最好的，方角不应该是可见的。谷歌解决方案似乎没有帮助...请帮助我玩它。多谢你们！

FIDDLE HERE.

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>

Answer 1

这是我迄今为止的解决方案。但我希望在那里有更好的解决方案...我使用活动的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 
 
}

<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>

UPDATE：我以前的答案，需要更多的CSS所以我编辑它。基于jbutler的回答，我得到了关于添加box-shadow来隐藏角落的想法。我在这里介绍的原始CSS没有什么改变，我只是添加了盒子阴影。更新小提琴HERE。

Answer 2

您可以尝试使用一个白色方块: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元素的平方底角，但要下边界radius'd li.active:before和:after。

一个更详尽的解释（礼貌atomictom的答案）：

https://css-tricks.com/tabs-with-round-out-borders/

Answer 3

我只是发表评论，但我不能。这是你后的效果？

https://css-tricks.com/tabs-with-round-out-borders/

看起来你需要另外一个伪元素。

Answer 4

下面是如何这可能是与旋转的组合来实现和框阴影的例子：

最初，你有你的矩形DIV /元素：

+---------+ 
    | ELEMENT | 
    +---------+ 

从这一点，你可以定位伪元素或者底角的一侧，用50％的边界半径（作一圆）

+---------+ 
    | ELEMENT | 
    O+---------+O 

因为我还没有设置背景颜色，你赢了”不要看这个。

我已经在两者上设置了边框，但随后将三种侧色设置为“透明”（所以您只能看到一个边框）。

旋转，这意味着你可以在“曲线状的角边界”的每一面：

+---------+ 
    | ELEMENT | 
    )+---------+(

使用箱阴影那么意味着你可以隐藏“元素底角”反正：

+---------+ 
    | ELEMENT | 
    ) --------- (

然后在底边框的颜色设置为活动elelemtn本身就意味着它是那么“隐藏”反正：

+---------+ 
    | ELEMENT | 
    )   (<-- rotated slightly to create your corner 

---

---

DEMO

/*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仅用于演示，并展示了如何可以 '切换标签'。