Bagaimana untuk Menambah Jarak Antara Kepingan dalam Carta Pai CSS Sahaja?

Tambahkan Jarak pada Kepingan Carta Pai CSS Sahaja: Penyelesaian Praktikal

Carta pai yang diberikan menggunakan teknik CSS sahaja menyediakan penyelesaian yang elegan untuk menggambarkan data. Walau bagaimanapun, ketiadaan jarak antara kepingan boleh mengurangkan keberkesanan carta. Untuk menangani isu ini dan mencipta carta pai yang menyerupai imej yang disediakan, ikuti langkah berikut:

Langkah 1: Alih Keluar Laluan Klip yang Tidak Diperlukan

Kod asal menggunakan laluan klip secara meluas, yang memperkenalkan kerumitan yang tidak perlu. Sebaliknya, buat struktur ringkas yang berputar di sekitar kedudukan mutlak dan jejari sempadan.

Langkah 2: Buat Div Bekas

Tubuhkan div kontena yang meletakkan semua hirisan secara berpusat sambil menyembunyikan sebarang kawasan yang melimpah menggunakan limpahan: tersembunyi.

Langkah 3: Kedudukan Mutlak Hiris

Di dalam bekas, letakkan setiap keping secara mutlak dan panjangkannya untuk menempati seluruh ruang yang ada. Dengan menggunakan jejari sempadan, pastikan hirisan kelihatan bulat.

Langkah 4: Tentukan Lebar dan Warna Sempadan

Untuk setiap kepingan, tentukan lebar dan warna jidar menggunakan sifat jidar. Gunakan pembolehubah CSS tersuai (cth., --c) untuk memudahkan pengubahsuaian warna jidar.

Langkah 5: Putar Slices

Gunakan transformasi: rotate() pada setiap kepingan untuk menjajarkannya dengan betul di sepanjang lilitan.

Kod Contoh

Laksanakan kod berikut untuk buat carta pai CSS sahaja dengan jarak antara kepingan:

.palette {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}

.palette > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 50px solid var(--c, red);
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33.745%);
}

.color1 {
  transform: rotate(72deg);
  --c: blue;
}

.color2 {
  transform: rotate(144deg);
  --c: orange;
}

.color3 {
  transform: rotate(-72deg);
  --c: green;
}

.color4 {
  transform: rotate(-144deg);
  --c: purple;
}

<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</div>

Dengan kod ini, anda kini boleh mencipta carta pai CSS sahaja yang menarik secara visual dengan jarak yang jelas antara kepingan.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Jarak Antara Kepingan dalam Carta Pai CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!