Bagaimanakah Anda Boleh Membuat Segmen dalam Bulatan Menggunakan CSS dan Mengendalikan Keperluan Slice Berbeza?

Segmen dalam Bulatan Menggunakan CSS: Mengendalikan Keperluan Slice Berbeza

Walaupun CSS membenarkan untuk membuat bulatan menggunakan penggodaman jejari sempadan, memanjangkan teknik ini untuk memasukkan segmen memberikan cabaran. Walau bagaimanapun, terdapat penyelesaian yang melibatkan penggabungan CSS dan SCSS untuk mencapai matlamat ini tanpa menggunakan JavaScript.

Menjana Slices Sama

Jika kepingan tidak memerlukan elemen yang berbeza dan mempunyai saiz yang sama, SCSS menyediakan fleksibiliti untuk menjana senarai hentian bagi kecerunan kon. Memandangkan palet warna, fungsi SCSS boleh mengedarkan hentian sama rata di sekeliling bulatan.

<code class="scss">@function stops($c) {
  $n: length($c);
  $p: 100%/$n;
  $l: ();

  @for $i from 1 through $n {
    $l: $l, nth($c, $i) 
      if($i > 1, 0%, unquote(''))
      if($i < $n, round($i*$p), unquote(''))
  }

  @return $l
}</code>

Menggunakan Conic-Gradient untuk Segmen

Dengan senarai hentian yang dihasilkan, kecerunan kon digunakan untuk melukis segmen pada elemen bulat. Untuk segmen bersaiz sama, kodnya adalah mudah:

<code class="css">.pie {
  width: 20em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(stops($c))
}</code>

Mengawal Sudut Permulaan

Untuk memastikan segmen bermula pada sudut tertentu (selain 12 o' jam), kata kunci daripada boleh ditambah pada kecerunan kon ():

<code class="css">background: conic-gradient(from 17deg, stops($c))</code>

Mengendalikan Hirisan Kaya Kandungan

Untuk segmen yang memerlukan kandungan atau memerlukan animasi keluar dari bulatan, pendekatan yang lebih kompleks diperlukan. Ini melibatkan penggunaan elemen pseudo dan animasi CSS untuk mencapai hasil yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Membuat Segmen dalam Bulatan Menggunakan CSS dan Mengendalikan Keperluan Slice Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!