セグメントCSSを使用して円の中のセグメント：テクニックの探求

境界半径プロパティを使用してCSSでサークルを作成することはよく知られています。ただし、提供された画像に描かれているように円をセグメント化することは可能ですか？問題は、JavaScriptに頼らず、HTMLとCSSだけに頼らずに達成できるかどうかが生じます。要素であることのないスライス

コンテンツまたはアニメーションを必要とする等しいスライス コンテンツまたはアニメーションを必要とする不平等なスライス

• @function stops（$ c）{ $ n：length（$ c）; //スライス数 $ p：100％/$ n; //円の％としてのスライス角 $ l ：（）; //最初に空の停止のリスト @$ $ iから$ n { $ l：$ l、nth（$ c、$ i）0％$ i*$ p } @return $ l }
• このアプローチは、次の停止リストを生成します：
• ＃f94144 0％14.2857142857％、＃f3722c 0％28.5714285714％、 ＃F8961E 0％42.8571428571％、＃F9C74F 0％57.1428571429％、 ＃90be6d 0％71.4285714286％、＃43aa8b 0％85.7142857143％、 ＃577590 0％100％
• ただし、この出力には不要な小数と明示的なデフォルトの停止が含まれます。したがって、改善された関数は次のとおりです。 $ n：length（$ c）; //スライス数 $ p：100％/$ n; //円の％としてのスライス角 $ l ：（）; //最初に空の停止のリスト @$ $ iから$ n { $ l：$ l、nth（$ c、$ i） if（$ i> 1、0％、unquote（ ''）） if（$ i

結果は次のとおりです。 ＃90be6d 0％71％、＃43aa8b 0％86％、＃577590 0％

この関数は、より直感的な停止を生成します。 幅：20em; / *幅を目的のパイ径に設定 */ アスペクト比：1; / *要素を正方形にする */ ボーダーラジウス：50％; / *正方形をディスクに変える */ / *等しくサイズのスライス */ 背景：conic-勾配（停止（$ c）） }

4つのCSS宣言で、等しいスライスにセグメント化された円を作成できます。スライスを回転させるには、conic-gradient（）。 幅：16em; / *幅を目的のパイ径に設定 */ アスペクト比：1; / *パイ要素を正方形にする */ ボーダーラジウス：50％; / *正方形をディスクに変える */ / *等しくサイズのスライス */ 背景： conic-gradient（17deg、＃f94144 14％、＃f3722c 0％29％、＃f8961e 0％43％、 ＃F9C74F 0％57％、＃90BE6D 0％71％、＃43AA8B 0％86％、＃577590 0％） }