円チャートをCSSでシンプルに表示するコードを紹介しています。このコードの使い方を応用すれば、他にも何か表現することができます。
deliciousにて円チャートをCSSで表現するサイトを見つけました。
画像をずらすことで円チャートを簡単に表現することができます。
結構シンプルです。
円チャートサンプル
37%
55%
90%
上記の背景画像を移動することでチャート表示を変えます。一つのチャートが30ピクセルスパンで作られていますので、ずらして表示することで簡単にチャートを作ることができます。
HTMLコード
CSSコード
とってもシンプルなので、これを真似てレーティング（5つ星表示）なども簡単にできるような気がします。
参照元
- Dynamic Pie Chart with CSS
- http://petewilliamsagency.com/css/examples/pie/
Comments for this entry on FriendFeed.
コメントする