Bagaimanakah Saya Boleh Mencipta Sektor Pekeliling dengan Kecerunan CSS?

Melukis Sektor Bulatan dengan CSS

Walaupun melukis bulatan lengkap dengan CSS adalah mudah, mencipta sektor memerlukan pendekatan yang lebih bernuansa. Walau bagaimanapun, dengan kecerunan CSS, adalah mungkin untuk menghasilkan bentuk sektor dengan berkesan.

Berbilang Kecerunan untuk Sektor

Daripada cuba melukis bahagian yang diisi sektor itu, pertimbangkan memberi tumpuan kepada kawasan yang tidak dipenuhi. Dengan mentakrifkan pelbagai kecerunan linear, anda boleh mencipta ilusi sektor:

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

Dalam contoh ini, kelas .ten mencipta sektor 10% dengan menggunakan dua kecerunan: satu mentakrifkan kawasan lutsinar dan satu lagi isi putih. Dengan memanipulasi sudut kecerunan pertama, anda boleh melaraskan saiz sektor.

Contoh Tambahan

Untuk contoh yang lebih kompleks, seperti mentakrifkan sektor yang lebih besar daripada 50%, pertimbangkan untuk menukar susunan kecerunan untuk mencapai yang diingini kesan:

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

Kesimpulan

Dengan menggunakan berbilang kecerunan CSS, adalah mungkin untuk mencipta sektor pekeliling yang berbeza darjah tanpa menggunakan kod kompleks atau perpustakaan luaran. Teknik ini menawarkan pendekatan yang serba boleh dan cekap untuk menambahkan minat dan fungsi visual pada aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sektor Pekeliling dengan Kecerunan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!