Bagaimanakah Saya Boleh Membuat Carta Pai Peratusan Menggunakan CSS sahaja?

Peratus Carta Pai dengan CSS Sahaja

Mencipta statik, elemen berbentuk pai semata-mata menggunakan CSS memerlukan pemahaman tentang sifat CSS tertentu.

Elemen # 2 Penciptaan

Untuk mencipta elemen #2, yang mewakili peratusan tertentu, gunakan sifat CSS conic-gradient. Sifat ini mencipta kecerunan berbentuk kon, dengan kedudukan bucu di tengah-tengah elemen induk. Sudut kon ditentukan oleh nilai peratusan, dengan 100% mewakili bulatan penuh.

Pengurusan Nilai Peratusan

Untuk mengurus bentuk unsur #2 bagi peratusan yang berbeza-beza, gunakan kombinasi sifat CSS:

• conic-gradient: Laraskan sudut daripada kon untuk memadankan peratusan.
• laluan klip: Gunakan laluan klip bulat untuk mengehadkan kawasan yang boleh dilihat bagi kecerunan kon. Ini memastikan bahawa bentuk muncul dengan betul untuk kedua-dua peratusan kecil dan besar.

Animasi

Untuk menghidupkan carta pai, gunakan sifat animasi dan tentukan keadaan dari yang menetapkan peratusan kepada 0. Dengan meningkatkan nilai peratusan secara beransur-ansur, carta pai akan diisi secara berperingkat.

Dibundarkan Tepi

Untuk mencapai tepi bulat, gunakan kecerunan jejari dengan dua hentian warna. Perhentian pertama pada 98% mencipta sorotan halus, manakala hentian kedua pada 100% menggunakan #0000 untuk mencipta sempadan yang tajam. Topeng atau -webkit-mask digunakan untuk menyembunyikan bahagian kecerunan secara terpilih.

Kod Contoh

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;
  
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Carta Pai Peratusan Menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!