できたもの

サイズ指定不要バージョン

See the Pen CSS Pie chart by totoraj (@totoraj930) on CodePen.

半円をborderを使用せずに表現したパターンです。

borderバージョン

See the Pen CSS Pie chart by totoraj (@totoraj930) on CodePen.

半円をborderを使って表現したパターン。

入れ子が減りますがborderを使うのでサイズ指定箇所が増えます。

解説

ざっくり書くと、半円を2個用意して回転させているだけです。

半円2個を回転させることで好きな角度が表現できるってわけですね。

回転させたときにはみ出た部分はoverflow: hidden;で隠しています。

あとはいい感じに調整すれば実用できるレベルにはなるかと。

下の画像を参考に感じ取ってください。(サイズ指定不要バージョンの説明)

説明画像1 説明画像2

使用例

この手法を用いた使用例てきなのも貼っておきます。

ローディングっぽいやつ

See the Pen CSS Pie chart by totoraj (@totoraj930) on CodePen.

さいごに

実用性はそこまでないですね・・・。

小ネタ程度ってことでお願いします。