Bagaimanakah Saya Boleh Mencipta Sektor Pekeliling Hanya Menggunakan Kecerunan CSS?

Melukis Sektor Bulatan dengan CSS

Walaupun melukis bulatan penuh dengan CSS adalah mudah, mencipta sektor bulatan boleh menjadi lebih mencabar. Walau bagaimanapun, menggunakan pelbagai kecerunan latar belakang, adalah mungkin untuk mencapai ini tanpa menggunakan JavaScript.

Menggunakan Kecerunan untuk Melukis Sektor

Daripada mewakili sektor dengan warna hijau kawasan, anda boleh mencipta kesan terbalik dengan melukis bahagian putih atau lutsinar. Ini dilakukan dengan menggunakan dua kecerunan linear:

• Kecerunan pertama meliputi sudut sektor dan peralihan daripada telus kepada putih pada titik tengah.
• Kecerunan kedua bermula pada sudut serenjang dan peralihan daripada putih kepada lutsinar pada titik tengah.

Sebagai contoh, untuk melukis Sektor 10%:

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

Sudut yang dinyatakan dalam kecerunan pertama (126deg) dikira sebagai 90 (360 * peratusan).

Contoh:

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

pie {
    border-radius: 50%;
    background-color: green;
    width: 5em;
    height: 5em;
    float: left;
    margin: 1em;
    border: 2px solid green;
}

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

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

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

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

.onehundred {
    background-image: none;
}

Teknik ini membolehkan penciptaan sektor bulat dengan sudut yang berbeza-beza, menyediakan cara serba boleh untuk mewakili peratusan atau nilai data lain menggunakan CSS.

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