带有反向圆角的CSS导航栏

Question

我可以使用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

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

Answer 1

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

您可以在此处查看：css3 menu with inverse rounded corners。

当然，您必须根据代码进行调整。