CSSで扇形を作る方法

HTMLとかCSSで扇形を作るのは::beforeとか::afterとかborder-radiusとか使わなきゃ行けなさそうで大変に思えるけど、ちょっとしたせこワザを思いついたので共有します。

border-radius: 50%;
background: conic-gradient(white 60deg, blue 60deg):

この例なら角度60度の扇形ができます。

仕組み

円を作ってその内部の色にグラデーションを当ててるだけです。
上の例では白と青のグラデーションをしていしていますが、用途によって white → transparent のようにすると扇形だけ可視化することができます。

背景

視覚的にみやすいタイマーアプリを作りたかったので、扇形を作る方法をさがしていました。
内部の色にグラデーションを当てて、その配色角度を変えていけば簡単だという結論にいたりました。

作ったツール　→　B-Timer