是否可以仅使用Border Radius创建此形状？

Question

对于选项卡式菜单，请考虑以下HTML：

<ul id="nav-tabs">
    <li class="active">Blah</li>
    <li>tab 2</li>
    <li>tab 3</li>
    <li>tab 4</li>
    <li>tab 5</li>
</ul>

不确定这是否可行，但我希望使用border-radius使标签的形状看起来像这样。没有图像。顶部很容易，但是底部，如何在线上弯曲是我不知道的部分是否可能：

这是jsfiddle

Answer 1

发表评论作为回答......

Chris Coyier撰写了一篇文章：Tabs with Round Out Borders。

他的实施与你的实施有点不同，但是通过玩border-radius，你应该能够使效果更接近你的形象，尽管我怀疑你能够得到阴影工作（如果你证明我错了，请在这里发布你的代码。非常有趣）。