Bagaimanakah Saya Boleh Mencipta Sektor Bulatan CSS Menggunakan Kecerunan Latar Belakang Berbilang?

Kecerunan Berbilang Latar Belakang untuk Lukisan Sektor Bulatan CSS

Melukis bulatan dengan CSS tulen adalah mudah, tetapi bagaimanakah kita hendak mencipta sektor bagi bulatan itu?

Daripada cuba melukis bahagian berwarna, lebih cekap untuk melukis bahagian lutsinar dalam putih.

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%);
}

Untuk lebih daripada 50%, kecerunan pertama perlu dicampur daripada warna lutsinar kepada warna hijau:

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

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