css - 如何在它们之间创建带有拱门的选项卡？

Question

下面是我正在谈论的图像:

我可以用纯 CSS 做这个吗？

更新:我在右上角和左上角创建了带圆 Angular 的 div(使用 border-radius)，并将它们放在选项卡之间。仍在寻找更优雅的解决方案。

Answer 1

最好的方法是在菜单项上叠加一个元素，该元素本身具有 border-radius。此元素必须具有与菜单容器相同的背景颜色。

这些覆盖应该用伪类 :before 和 :after 完成。那些也有很棒的browser support .

HTML:

<ul class="tabs">
    <li><a href="#">Archive</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Patv</a></li>
</ul>
<br style="clear:both;" /> <!-- I didn't have an other element to clear the floats with -->

CSS:

.tabs { /* generates the grey line on the very top */
    width: 100%;
    height: 5px;
    background: grey;
}

.tabs li {
    list-style-type: none;
    float: left;
}

.tabs li:first-child {
    margin-left: 30px; /* This is just to move the menu to the left, for demo purposes */
}

.tabs a {
    text-underline: none;
    color: black;
    line-height: 30px;
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: grey;
}

.tabs a:after, .tabs li:first-child a:before {
    content: '';
    width: 4px;
    height: 25px;
    background: white; /* This has to be the background color of the container. Change it to red to see the pseudo elements */ 
    position: absolute;
    margin-top: 5px;
    margin-left: -3px;
    border-radius: 10px;
}

.tabs a:after {
    margin-left: 18px;
}

这是一个演示:http://jsfiddle.net/rGubz/