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>

これが可能かどうかはわかりませんが、タブの形状をborder-radiusでこのように見せたいです。画像はありません。上の部分は簡単ですが、下の部分、線上でどのように曲がるかは、可能かどうかわかりません。

これがjsfiddleです

Answer 1

コメントを回答として投稿しています...

Chris Coyier には、これに対処する記事があります: Tabs with Round Out Borders。

彼の実装はあなたのものとは少し異なりますが、 で遊ぶborder-radiusことで、イメージにあるものに近い効果を得ることができるはずですが、影を機能させることができるとは思えません (私が間違っていることを証明した場合) 、ここにコードを投稿してください。非常に興味深いでしょう)。