html - 是否可以仅使用边框半径创建此形状？

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>

不确定这是否可行，但我想让标签的形状看起来像这样，带有边框半径。没有图像。顶部很容易，但底部，它是如何在线弯曲的部分我不知道是否可能：

这是jsfiddle

Answer 1

发表评论作为答案...

Chris Coyier 有一篇文章解决了这个问题：带有圆形边框的标签。

他的实现与您的略有不同，但是通过使用border-radius您应该能够使效果更接近您在图像中的效果，尽管我怀疑您能否使阴影正常工作（如果您证明我错了，在这里发布你的代码。会很有趣）。