Bagaimana untuk Mencipta Sektor Bulatan Hanya Menggunakan CSS?

Melukis Sektor Bulatan dengan CSS

Masalah: Bagaimana untuk melukis sektor bulatan menggunakan CSS tulen?

Penyelesaian:

Konvensional Teknik CSS memberi tumpuan kepada mencipta keseluruhan bulatan dan kemudian menindihnya dengan topeng untuk mendedahkan sektor yang dikehendaki. Walau bagaimanapun, untuk penyelesaian yang lebih cekap dan dinamik, kami boleh memanfaatkan berbilang kecerunan latar belakang:

Kod CSS:

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

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

Penjelasan:

1. Kelas .pie mentakrifkan keseluruhan bulatan dengan latar belakang hijau dan bulat sudut.

2. Kelas .ten mencipta sektor 10% (atau 126 darjah) dengan menindih dua kecerunan linear:

   • Kecerunan pertama (126 darjah) mencipta warna putih latar belakang untuk sektor tersebut.
   • Kecerunan kedua (90 darjah) bertindak sebagai topeng, mendedahkan latar belakang hijau di kawasan bukan sektor.

Pelanjutan untuk Sektor Tersuai:

Teknik di atas boleh diubah suai untuk mencipta sektor mana-mana sudut:

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

Ganti START_ANGLE dengan sudut yang dikehendaki dalam darjah (0-360) untuk melukis sektor yang mewakili sudut itu.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sektor Bulatan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!