带有反向圆角的 CSS 导航栏答案

【问题标题】：CSS nav bar with reverse rounded corners带有反向圆角的 CSS 导航栏
【发布时间】：2014-10-29 08:35:09
【问题描述】：

我可以只使用 css 而不使用图像来制作这种类型的导航栏吗？

这是我目前的结果

 .tabrow:before {
    position: absolute;
    content: " ";
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.tabrow li:after {
    right: -6px;
    border-bottom-left-radius: 6px;
    border-width: 0 0 1px 1px;
    box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
    box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
    box-shadow: -2px 2px 0 #FFF;
}

这是一个小提琴link

我对 li 的第一个和最后一个孩子有问题。

【问题讨论】：

请提供您迄今为止尝试过的代码并将其放在您的问题中。演示（即使它已损坏）也将有助于回答您的问题。
现在我已经提供了一个示例代码，你可以帮忙@secelite
请检查此解决方案：stackoverflow.com/questions/8929173/…。它似乎正是您正在寻找的。span>
thnx @secelite 正是我需要的：D 你能发布你的答案，以便我可以将其标记为正确答案

标签： css navigation

【解决方案1】：

您正在寻找的是反圆角。 SO上已经有解决方案了。

您可以在这里查看：css3 menu with inverse rounded corners。

当然，您必须熟练掌握代码。

【讨论】：