[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート

Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸

[sevenbluesea]

タブ

[kasajei]

タブ

[kkeisuke]

css3

[diveintounlimit]

なるほど、これはうまい。

[nibushibu]

:before と :after を使ったアレンジ

[solidstatesociety]

劇的！

[nors]

http://orderedlist.com/blog/articles/flared-borders-with-css/

[nevlib]

CSS強いなあ。数年前の頭だと画像としか思わんなｗ

[Donca]

✔ [CSS]「:before」「:after」でタブのディテールを強化するスタイルシート