Bagaimanakah saya boleh membuat kalangan tersegmen menggunakan CSS tanpa JavaScript?

Segmen dalam Bulatan Menggunakan CSS

Mencipta kalangan menggunakan hack jejari sempadan CSS ialah amalan biasa, tetapi bagaimana anda mencapai segmen rupa seperti yang digambarkan dalam imej yang disediakan? Adakah terdapat cara untuk mencapai ini menggunakan HTML dan CSS, tidak termasuk JavaScript?

Penyelesaian

Penyelesaian 2024

Jom teroka kes berbeza berdasarkan sama ada segmen itu perlu elemen dan sama ada saiznya sama:

1. Kepingan tidak perlu menjadi unsur dan ia adalah sama

Dalam kes ini, kita boleh memanfaatkan palet warna dan menggunakan SCSS untuk menjana kecerunan kon() yang mengagihkan kepingan secara sama rata. Contohnya, menggunakan palet daripada coolors.co, kita boleh mencipta fungsi SCSS:

<code class="scss">@function stops($c) {
  $n: length($c); // number of slices
  $p: 100%/$n; // slice angle as a % of circle
  $l: (); // list of stops, initially empty
  
  @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>

Fungsi ini menjana senarai henti untuk kepingan yang sama. Kami kemudiannya boleh menggunakannya dalam kecerunan kon ():

<code class="css">.pie {
  width: 20em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make the element square */
  border-radius: 50%; /* turn square into disc */
  /* equally-sized slices */
  background: conic-gradient(stops($c))
}</code>

Pendekatan ini membolehkan kami mencipta segmen yang sama tanpa memerlukan elemen yang berasingan. Melaraskan sudut permulaan kecerunan-kon () juga boleh dilaksanakan.

2. Kes-kes lain

Kita boleh meneroka kes tambahan seperti:

• Kepingan tidak perlu menjadi unsur tetapi ia tidak sama
• Kepingan perlu kandungan/ untuk menghidupkan dan ia adalah sama
• Slices memerlukan kandungan/ untuk menghidupkan keluar dan ia tidak sama

Setiap kes этих memerlukan pendekatan dan teknik unik yang melampaui skop pertanyaan asal.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat kalangan tersegmen menggunakan CSS tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!