できたもの

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

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

border バージョン

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

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

解説

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

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

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

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

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

説明画像1

説明画像2

使用例

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

ローディングっぽいやつ

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

さいごに

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

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