## Bolehkah Anda Menghiris Bulatan kepada Segmen Hanya Menggunakan CSS?

Segmen dalam Bulatan Menggunakan CSS: Penerokaan Teknik

Membuat bulatan dalam CSS menggunakan sifat jejari sempadan adalah satu yang terkenal teknik. Walau bagaimanapun, adakah mungkin untuk membahagikan bulatan seperti yang digambarkan dalam imej yang disediakan? Timbul persoalan sama ada ini boleh dicapai tanpa bergantung pada JavaScript dan semata-mata melalui HTML dan CSS.

Penyelesaian untuk 2024

Untuk mendalami isu ini, kami akan mengkategorikan senario berbeza:

• hirisan sama tanpa unsur
• hirisan tidak sama tanpa unsur
• hirisan sama yang memerlukan kandungan atau animasi
• hirisan tidak sama yang memerlukan kandungan atau animasi

Slices Sama Tanpa Menjadi Elemen

Memanfaatkan palet warna, SCSS boleh menjana senarai henti untuk conic-gradient() untuk mencipta kepingan seragam. Sebagai contoh, pertimbangkan palet berikut:

$c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590;

Kami mentakrifkan fungsi SCSS untuk menjana kepingan yang sama jaraknya:

@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) 0% $i*$p
    }
    
    @return $l
}

Pendekatan ini menjana senarai hentian berikut:

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

Walau bagaimanapun, output ini termasuk perpuluhan yang tidak perlu dan hentian lalai yang jelas. Oleh itu, fungsi yang dipertingkatkan ialah:

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

Hasilnya adalah seperti berikut:

#f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%,
#90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%

Fungsi ini menghasilkan hentian yang lebih intuitif.

Untuk menggunakan ini dalam bentuk kon -gradient(), kami mentakrifkan kelas berikut:

.pie {
    width: 20em; /* set width to desired pie diameter */
    aspect-ratio: 1; /* make the element square */
    border-radius: 50%; /* turn square into disc */
    /* equally-sized slices */
    background: conic-gradient(stops($c))
}

Dengan hanya empat pengisytiharan CSS, kami boleh mencipta bulatan yang dibahagikan kepada kepingan yang sama. Untuk memutar hirisan, kami hanya menentukan sudut permulaan yang berbeza untuk kecerunan kon ().

background: conic-gradient(from 17deg, stops($c))

Demo Langsung:

<code class="html"><div class="pie"></div>

<code class="css">.pie {
  width: 16em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make pie element square */
  border-radius: 50%; /* turn square into disc */
  /* equally sized slices */
  background: 
    conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, 
        #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}</code>

Atas ialah kandungan terperinci ## Bolehkah Anda Menghiris Bulatan kepada Segmen Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!