JavaScript を使用せずに CSS を使用して、円を等しいサイズまたはさまざまなサイズにセグメント化するにはどうすればよいですか?

CSS で円を分割する

CSS では、border-radius プロパティを使用して円形を作成できます。ただし、これらの円にセグメントを追加するには、さらに調査する必要があります。 JavaScript を使用せずにこれを実現する方法を詳しく見てみましょう。

<h3>等しいサイズのセグメント</h3>

セグメントが HTML 要素を必要とせず、同じサイズであれば、次のことが可能です。 SCSS を利用して conic-gradient() のストップのリストを生成します。カスタム SCSS 関数を作成してストップを均等に分散できます:

<code class="scss">@function stops($c) {
    $n: length($c); // number of slices
    $p: 100%/$n; // slice angle as a % of circle
    $l: (); // list of stops, initially empty
    
    @for $i from 1 through $n {
        $l: $l, nth($c, $i) 
            if($i &gt; 1, 0%, unquote(''))
            if($i &lt; $n, round($i*$p), unquote(''))
    }
    
    @return $l
}</code>

この関数を使用すると、conic-gradient() 内のセグメントの色と角度を定義できます:

<code class="css">.pie {
    width: 20em; /* desired pie diameter */
    aspect-ratio: 1; /* square element */
    border-radius: 50%; /* disc shape */
    background: conic-gradient(stops(#f94144, #f3722c, #f8961e, #f9c74f, 
        #90be6d, #43aa8b, #577590))
}</code>

これにより、同じサイズのセグメントが円周上に均等に配置された円が作成されます。

<h3>さまざまなサイズのセグメント</h3>

セグメントにさまざまなサイズが必要な場合は、同様の戦略を引き続き利用できます。 stop() 関数は、各セグメントの開始角度と終了角度を定義する追加のパラメーターを受け取るように変更できます。グラデーション定義内で、各カラー ストップに対してこれらの角度を指定できます。

さらに、セグメントにコンテンツやアニメーションを含める必要がある場合は、HTML 要素を使用し、CSS 変換を使用して円内に配置できます。サイズや角度を細かく調整することで、重なったように見えるセグメントを作り、複雑なデザインを表現することができます。

以上がJavaScript を使用せずに CSS を使用して、円を等しいサイズまたはさまざまなサイズにセグメント化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。