Bagaimanakah saya boleh membahagikan kalangan kepada saiz yang sama atau berbeza-beza menggunakan CSS tanpa JavaScript?

Membahagikan Kalangan dengan CSS

Dalam CSS, adalah mungkin untuk mencipta bentuk bulat menggunakan sifat jejari sempadan. Walau bagaimanapun, menambah segmen pada kalangan ini memerlukan penerokaan lanjut. Mari kita mendalami cara untuk mencapai ini tanpa JavaScript.

Segmen Saiz Sama

Jika segmen tidak memerlukan elemen HTML dan mempunyai saiz yang sama, kita boleh gunakan SCSS untuk menjana senarai hentian bagi conic-gradient(). Fungsi SCSS tersuai boleh dibuat untuk mengagihkan hentian secara sama rata:

<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 > 1, 0%, unquote(''))
            if($i < $n, round($i*$p), unquote(''))
    }
    
    @return $l
}</code>

Menggunakan fungsi ini, kita boleh menentukan warna dan sudut untuk segmen dalam kecerunan kon():

<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>

Ini akan membuat bulatan dengan segmen yang sama saiz, diagihkan sama rata di sekeliling lilitan.

Segmen dengan Pelbagai Saiz

Jika segmen memerlukan saiz yang berbeza-beza, kita masih boleh menggunakan strategi yang sama. Fungsi stops() boleh diubah suai untuk mengambil parameter tambahan yang menentukan sudut mula dan akhir untuk setiap segmen. Dalam takrifan kecerunan, kita kemudian boleh menentukan sudut ini untuk setiap hentian warna.

Selain itu, jika segmen perlu mengandungi kandungan atau animasi, kita boleh menggunakan elemen HTML dan meletakkannya dalam bulatan menggunakan perubahan CSS. Dengan melaraskan saiz dan sudutnya dengan teliti, kami boleh mencipta segmen yang kelihatan bertindih dan mencipta reka bentuk yang kompleks.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membahagikan kalangan kepada saiz yang sama atau berbeza-beza menggunakan CSS tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!