## Bolehkah Anda Membuat Segmen Carta Pai dalam CSS Tanpa JavaScript?

Segmen dalam Bulatan Menggunakan CSS

Mencipta kalangan dalam CSS menggunakan jejari sempadan ialah amalan biasa. Walau bagaimanapun, bolehkah kita mencapai kesan yang sama dengan segmen, sama seperti carta pai? Artikel ini menyelidiki cara untuk mencapainya melalui HTML dan CSS sahaja, tidak termasuk penggunaan JavaScript.

Menjana Segmen Sama Saiz

Satu pendekatan untuk segmen bersaiz sama melibatkan penjanaan senarai hentian untuk kecerunan kon () menggunakan SCSS. Kita boleh mencipta fungsi SCSS tersuai hentian($c) untuk menjana hentian ini berdasarkan warna yang disediakan ($c), memastikan jarak yang sama. Fungsi ini mengambil kira bilangan hirisan, mengira sudut hirisan sebagai peratusan dan menjana senarai hentian dengan peratusan yang sesuai.

Sebagai contoh, dengan palet warna daripada Coolors, kami boleh menggunakan hentian kami () berfungsi dalam perisytiharan conic-gradient():

<code class="css">.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}</code>

Pendekatan ini membenarkan sudut hirisan boleh disesuaikan dengan menentukan sudut yang berbeza daripada sudut dalam conic-gradient().

Atas ialah kandungan terperinci ## Bolehkah Anda Membuat Segmen Carta Pai dalam CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!