Bentuk CSS yang lebih baik menggunakan bentuk () – Bagian 2: Informasi lebih lanjut tentang busur – Beragampengetahuan

Siapkan bagian kedua? Kami masih menjelajah shape() Fungsi, lebih tepatnya, perintah busur. Saya harap Anda meluangkan waktu untuk mencerna bagian pertama karena kami akan langsung membuat lebih banyak bentuk!

Ingatkan kami, shape() Saya hanya mendukung fitur di Chrome 137+ dan Safari 18.4+ ketika saya menulisnya pada Mei 2025.

Bentuk departemen

Bentuk klasik lainnya juga dapat digunakan dalam bagan seperti PI.

Jelas, kami memiliki busur. Adapun poin -poin ini, kami memiliki dua poin yang tidak dipindahkan, dan poin lainnya tergantung pada jumlah pengisian di departemen.

Kode terlihat seperti ini:

.sector {
  --v: 35; /* [0 100]*/
  
  aspect-ratio: 1;
  clip-path: shape(from top, arc to X Y of R, line to center);
}

Kami mendefinisikan variabel yang akan mengontrol pengisian sektor ini. Itu memiliki nilai 0 Dan 100. Untuk menggambar bentuknya, kami topbuat busur sampai titik (x, y), lalu kita pindah ke center.

Kami dapat menggunakan nilai kata kunci top Dan center?

Ya! Tidak seperti polygon() Fungsi, kami memiliki kata kunci untuk situasi tertentu, mis. top,,,,, bottom,,,,, left,dll background-position Jadi. Saya tidak berpikir saya perlu masuk ke bagian ini secara rinci karena sepele, tetapi senang mengetahui karena dapat membuat bentuk Anda lebih mudah dibaca.

Jari -jari busur harus sama dengan 50%. Kami menggunakan elemen elemen persegi, dan sektor ini adalah bagian dari lingkaran dan perlu diisi dengan seluruh elemen, sehingga jari -jari sama dengan setengah dari lebar (atau tinggi).¹

Adapun titik, ditempatkan di dalam lingkaran, dan posisinya tergantung pada nilai V. Anda tidak ingin penjelasan matematika yang membosankan, bukan? Tanpa itu, inilah formula untuk x dan y:

X = 50% + 50% * sin(V * 3.6deg)
Y = 50% - 50% * cos(V * 3.6deg)

Kode kami menjadi:

.sector {
  --v: 35; /* [0 100] */
  
  aspect-ratio: 1;
  clip-path: shape(from top,
    arc to calc(50% + 50% * sin(var(--v) * 3.6deg)) 
           calc(50% - 50% * cos(var(--v) * 3.6deg)) of 50%,
    line to center);
}

Nah, hasilnya tidak bagus, tetapi kodenya tidak bebas dari kesalahan. Bisakah Anda mencari tahu apa yang kami lewatkan?

Ini adalah ukuran dan arah busur!

Ingat apa yang saya katakan di posting sebelumnya? Anda akan selalu mengalami masalah, tetapi jika kami mencoba kombinasi yang berbeda, kami dapat dengan mudah menyelesaikan masalah. Dalam kasus kami, kami perlu menggunakan: small cw.

Lebih baik! Mari kita coba dengan nilai lebih dan lihat bagaimana bentuk berperilaku:

Ups, beberapa nilai bagus, tetapi beberapa nilai tidak banyak. Arahnya harus searah jarum jam, tapi mungkin kita harus menggunakan large Alih-alih small? Ayo coba:

Masih belum berhasil. Masalahnya di sini adalah bahwa kami memindahkan titik busur berdasarkan nilai V, dan gerakan ini menciptakan konfigurasi yang berbeda untuk busur arc Memesan.

Berikut adalah demonstrasi interaktif yang lebih baik memvisualisasikan apa yang terjadi:

Saat Anda memperbarui nilainya, berhati -hatilah large cw Selalu coba ikuti busur terbesar antara dua poin, dan small cw Cobalah untuk mengikuti yang terkecil. Saat nilainya kurang dari 50,,,,, small cw Beri kami hasil yang bagus. Tapi saat itu lebih besar dari 50ini large cw Kombinasi adalah orang yang baik.

Saya tahu, ini sedikit rumit dan saya ingin melihat contoh khusus ini untuk menekankan fakta bahwa kita dapat bekerja banyak dengan busur. Namun, semakin banyak masalah yang kita hadapi, semakin baik solusinya.

Dalam hal ini, solusinya sangat sederhana. Kami memesan penggunaannya large cw Dan tambahkan satu border-radius ke elemen. Jika Anda memeriksa demo sebelumnya, bahkan large cw Ini bukan tentang menghasilkan hasil yang baik, itu mengisi area yang kami inginkan. Yang harus kita lakukan adalah menjepit ruang ekstra dan ruang sederhana border-radius: 50% Akan melakukan pekerjaan ini!

Saya menjaga box-shadow Di sana kita bisa melihat busur, tetapi kita bisa melihat dengan jelas border-radius Buatlah perbedaan dalam bentuk tubuh.

Kita masih perlu mempertimbangkan situasi marjinal. Saat nilainya sama dengan 100Kedua titik busur memiliki koordinat yang sama, yang logis karena sektor ini penuh dan kami memiliki lingkaran. Namun, dalam hal ini, busur tidak melakukan apa pun secara definisi dan kami tidak mendapatkan lingkaran lengkap.

Untuk mengatasi masalah ini, kita dapat membatasi nilainya mis. 99.99 Hindari kedatangan 100. Sedikit hacky, tetapi bisa menyelesaikan pekerjaan.

.sector {
  --v: 35; /* [0 100]*/
  
  --_v: min(99.99, var(--v));
  aspect-ratio: 1;
  clip-path: shape(from top,
    arc to calc(50% + 50% * sin(var(--_v) * 3.6deg)) 
           calc(50% - 50% * cos(var(--_v) * 3.6deg)) of 50% large cw,
    line to center);
  border-radius: 50%;
}

Sekarang bentuk kami sempurna! Dan jangan lupa bahwa Anda dapat menerapkannya pada elemen gambar:

busur

Mirip dengan bentuk kipas, kita juga dapat membuat busur. Bagaimanapun, kami bekerja dengan arc perintah, jadi kita harus melakukan ini.

Kami sudah memiliki setengah dari kode karena pada dasarnya adalah bentuk kipas tanpa bagian internal. Kita hanya perlu menambahkan lebih banyak perintah untuk memotong bagian dalam.

.arc {
  --v: 35; 
  --b: 30px;
  
  --_v: min(99.99, var(--v));
  aspect-ratio: 1;
  clip-path: shape(from top,
    arc to calc(50% + 50% * sin(var(--_v) * 3.6deg)) 
           calc(50% - 50% * cos(var(--_v) * 3.6deg)) of 50% cw large,
    
    line to calc(50% + (50% - var(--b)) * sin(var(--_v) * 3.6deg)) 
            calc(50% - (50% - var(--b)) * cos(var(--_v) * 3.6deg)),
    arc to 50% var(--b) of calc(50% - var(--b)) large
  );
  border-radius: 50%;
}

Dari bentuk sektor ini, kami hapus line to center Tambalan bersama dan ganti dengan yang lain line Perintah bergerak ke titik pada lingkaran dalam. Jika Anda membandingkan koordinatnya dengan titik sebelumnya, Anda akan melihat yang setara dengan --bini adalah variabel yang mendefinisikan ketebalan busur. Lalu kami menggambar busur ke arah yang berlawanan (ccw) Sampai titik 50% var(--b)ini juga titik di mana offset sama --b Dari atas.

Saya tidak mendefinisikan arah busur kedua, karena secara default browser akan digunakan ccw.

Ah, masalah yang sama yang kita temui dalam bentuk sektor sekali lagi terlihat! Tidak semua nilai memberikan hasil yang baik karena logika yang sama yang telah kita lihat sebelumnya, dan Anda dapat melihatnya border-radius Tidak ada perbaikan. Kali ini, kita perlu menemukan cara untuk mengubah ukuran busur secara kondisional sesuai dengan nilainya. Seharusnya large Saat V lebih besar dari 50Dan small jika tidak.

Kondisi CSS? Ya, itu mungkin! Pertama, mari kita konversi nilai V seperti ini:

--_f: round(down, var(--_v), 50)

Nilai ini berada dalam kisaran [0 99.99] (Jangan lupa kami tidak ingin mencapai nilai 100). Kami menggunakan round() Untuk memastikan bahwa itu selalu sama dengan kelipatan nilai tertentu, yaitu. 50 Dalam kasus kami. Jika nilainya kurang dari 50,ternyata 0jika tidak 50.

Hanya ada dua nilai yang mungkin, sehingga kami dapat dengan mudah menambahkan kondisinya. jika --_f setara 0 Kami menggunakan kecil; Kalau tidak, kami menggunakan besar:

.arc {
  --v: 35;
  --b: 30px;
  
  --_v: min(99.99, var(--v));
  --_f: round(down,var(--_v), 50);
  --_c: if(style(--_f: 0): small; else: large);
  clip-path: shape(from top,
    arc to calc(50% + 50% * sin(var(--_v) * 3.6deg)) 
           calc(50% - 50% * cos(var(--_v) * 3.6deg)) of 50% cw var(--_c),
    line to calc(50% + (50% - var(--b)) * sin(var(--_v) * 3.6deg)) 
            calc(50% - (50% - var(--b)) * cos(var(--_v) * 3.6deg)),
    arc to 50% var(--b) of calc(50% - var(--b)) var(--_c)
  );
}

Saya tahu apa yang Anda pikirkan, tetapi izinkan saya memberi tahu Anda bahwa kode di atas berfungsi. Anda mungkin belum tahu, tetapi CSS telah digunakan baru -baru ini if() sintaksis. Untuk memainkannya juga, tetapi kami menemukan kasus penggunaan yang sempurna. Berikut adalah demo yang dapat Anda uji dengan Chrome Canary:

Cara lain untuk mengekspresikan kondisi adalah dengan mengandalkan permintaan gaya dengan dukungan yang lebih baik:

.arc {
  --v: 35;
  --b: 30px;
  
  --_v: min(99.99, var(--v));
  --_f: round(down, var(--_v), 50);
  aspect-ratio: 1;
  container-name: arc;
}
.arc:before {
  content: "";
  clip-path: shape(from top,
    arc to calc(50% + 50% * sin(var(--_v) * 3.6deg)) 
           calc(50% - 50% * cos(var(--_v) * 3.6deg)) of 50% cw var(--_c, large),
    line to calc(50% + (50% - var(--b)) * sin(var(--_v) * 3.6deg)) 
            calc(50% - (50% - var(--b)) * cos(var(--_v) * 3.6deg)),
    arc to 50% var(--b) of calc(50% - var(--b)) var(--_c, large)
  );
  @container style(--_f: 0) { --_c: small }
}

Logikanya sama, tetapi fungsi ini membutuhkan hubungan orangtua-anak, itulah sebabnya saya menggunakan elemen semu. Secara default, ukurannya akan largejika nilai --_f setara 0mari kita beralih ke small.

Harap dicatat bahwa kami harus mendaftarkan variabel --_f menggunakan @property Dapat menggunakan apapun if() Kueri fungsi atau gaya.

Pernahkah Anda memperhatikan perubahan halus lain yang saya buat? Saya menghapusnya border-radius Saya menerapkan logika bersyarat ke busur pertama. Keduanya memiliki masalah yang sama, tetapi border-radius Hanya satu dari mereka yang dapat diperbaiki saat logika bersyarat dapat diperbaiki secara bersamaan, sehingga kami dapat mengoptimalkan kode sedikit.

Busur dengan tepi bulat

Bagaimana dengan menambahkan tepi melingkar ke busur kita? Lebih baik, kan?

Bisakah Anda melihat bagaimana hal itu dilakukan? Gunakan ini sebagai latihan kecil dan perbarui kode dari contoh sebelumnya untuk menambahkan tepi bulat ini. Saya harap Anda dapat menemukannya sendiri, karena perubahannya sangat sederhana – kami memperbarui satu line Memesan arc Perintah, kami menambahkan yang lain arc Perintah terakhir.

clip-path: shape(from top,
  arc to calc(50% + 50% * sin(var(--_v) * 3.6deg)) 
         calc(50% - 50% * cos(var(--_v) * 3.6deg)) of 50% cw var(--_c, large),
  arc to calc(50% + (50% - var(--b)) * sin(var(--_v) * 3.6deg))
         calc(50% - (50% - var(--b)) * cos(var(--_v) * 3.6deg)) of 1% cw,
  arc to 50% var(--b) of calc(50% - var(--b)) var(--_c, large),
  arc to top of 1% cw
);

Jika Anda tidak memahami perubahannya, keluarkan pena dan kertas dan gambarkan bentuknya agar lebih baik melihat keempat busur yang kami gambar. Sebelumnya, kami memiliki dua busur dan dua baris, tetapi sekarang kami menggunakan busur alih -alih garis.

Apakah Anda ingat tips yang digunakan 1% Nilai jari -jari? Busur baru adalah setengah lingkaran, sehingga kami dapat mengandalkan trik Anda untuk menentukan jari -jari kecil dan browser akan melakukan pekerjaan untuk Anda dan menemukan nilai yang benar!

sebagai kesimpulan

Kami sudah melakukannya – cukup arc Memesan! Saya harus menulis dua artikel yang berfokus pada perintah ini karena ini yang paling sulit, tapi saya harap sekarang jelas bagaimana menggunakannya dan bagaimana menghadapi arah dan ukuran hal -hal, karena ini mungkin sumber kebanyakan sakit kepala.

Ngomong -ngomong, saya hanya melihat kasus busur, karena pada kenyataannya kita dapat menentukan dua jari -jari dan menggambar busur elips, yang lebih rumit. Kecuali jika Anda ingin menjadi satu shape() Tuan, Anda hampir tidak membutuhkan busur elips, jadi jangan ganggu mereka.

Sebelum posting berikutnya saya menulis artikel untuk Master Ujung Depan di mana Anda dapat membuat lebih banyak bentuk yang indah arc Pesanan ini merupakan tindak lanjut yang baik untuk ini.

Dalam kasus kami, kami memiliki elemen persegi, sehingga arah 50% tidak ada tandingannya dengan ukuran yang sama dengan 50% sqrt(Width² + Height²)/sqrt(2). Karena lebar dan tinggi sama, kami berakhir dengan 50% (atau tinggi) lebar. ⮑