できたもの
サイズ指定不要バージョン
https://codepen.io/totoraj930/pen/zjxNeQ/
半円を border を使用せずに表現したパターンです。
border バージョン
https://codepen.io/totoraj930/pen/RyNoLv/
半円を border を使って表現したパターン。
入れ子が減りますが border を使うのでサイズ指定箇所が増えます。
解説
ざっくり書くと、半円を 2 個用意して回転させているだけです。
半円 2 個を回転させることで好きな角度が表現できるってわけですね。
回転させたときにはみ出た部分はoverflow: hidden;で隠しています。
あとはいい感じに調整すれば実用できるレベルにはなるかと。
下の画像を参考に感じ取ってください。(サイズ指定不要バージョンの説明)
使用例
この手法を用いた使用例てきなのも貼っておきます。
ローディングっぽいやつ
See the Pen CSS Pie chart by totoraj (@totoraj930) on CodePen.
さいごに
実用性はそこまでないですね・・・。
小ネタ程度ってことでお願いします。