Perintah CSS Shape () | beragampengetahuan – Beragampengetahuan

CSS shape() Fitur baru -baru ini didukung di browser Chrome dan Webkit. Ini adalah cara untuk menggambar bentuk yang kompleks, clip-path milik. Selama bertahun -tahun, kami memiliki kemampuan untuk menggambar bentuk dasar – pikirkan circle,,,,, ellipse()Dan polygon() – tetapi tidak ada cara “mudah” untuk menggambar bentuk yang lebih kompleks.

Yah, itu tidak benar. Memang, tidak ada cara “sederhana” untuk menggambar bentuk, tetapi kami sudah memilikinya path() Untuk jangka waktu tertentu, kita dapat secara langsung menggunakan perintah SVG untuk menggambar bentuk dalam parameter fungsi. Berikut adalah contoh jalur SVG yang ditarik langsung dari posting blog Webkit:

<svg viewBox="0 0 150 100" xmlns="
  <path fill="black" d="M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z " />
</svg>

Ini berarti kita bisa menariknya <path> Mengoordinasikan dan memasukkannya path() Fungsi CSS saat memotong bentuk dari elemen:

.clipped {
  clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z");
}

Saya sangat mengerti apa yang dilakukan semua surat dan angka ini. Hanya lelucon, saya harus membaca di suatu tempat, seperti artikel “Resep Usus untuk Vektor Tulis Tangan” terbaru Myriam Frisano. Semua ini memiliki kurva belajar yang curam, tidak semua orang (termasuk saya) telah turun ke kutu buku, meskipun menyenangkan. Menulis SVG dengan tangan adalah profesi niche, bukan apa yang Anda harapkan dari rata -rata pemimpin. Saya menduga saya sendirian mengatakan saya lebih suka menggambar vektor -vektor ini pada ara terlebih dahulu, mengekspor kode SVG, dan kemudian menyalin jalur yang diperlukan.

ini shape() Dapat dikatakan bahwa tujuan fungsi lebih banyak CSS-Y. Kami mendapatkan perintah baru yang memberi tahu browser tempat menggambar garis, busur dan kurva, sama seperti path()tetapi kita dapat menggunakan unit CSS bahasa Inggris dan asli bukan huruf dan koordinat yang tidak dapat dibaca. Ini memungkinkan kita untuk menggunakan CSS calc()– Dalam gambar kami!

Berikut adalah gambar yang cukup sederhana yang saya buat dengan beberapa elemen. Anda perlu melihat demo di Chrome 135+ atau Safari 18.4+ untuk melihat apa yang terjadi.

Jadi kami tidak melihat semua koordinat aneh itu path()kami telah memperoleh persyaratan baru. Posting ini sebenarnya adalah bagaimana saya mencoba berputar di sekitar istilah -istilah baru ini dan bagaimana menggunakannya.

Singkatnya, pertama -tama Anda harus memberi tahu shape() Di mana seharusnya titik awal saat menggambar. Misalnya, kita bisa mengatakan “from top left“Atur asal di sudut kiri atas elemen dengan kata kunci arah. Kita juga dapat mengatur posisi itu menggunakan unit CSS, jadi”from 0 0Itu bekerja juga. Setelah kami menentukan titik awal, kami dapat menggunakan satu set perintah untuk menggambar garis, busur, dan kurva.

Saya pikir meja akan membantu.

Spesifikasinya intensif dan Anda mungkin mengharapkan banyak karya seluler seperti ini. Sekali lagi, ini hanya catatan saya, tetapi beri tahu saya jika Anda pikir ada nuansa kenyamanan lain yang termasuk dalam tabel.

Oh, hal lain yang menarik: Anda dapat menyesuaikan shape() Pada hover/fokus. Satu -satunya hal adalah saya tidak bisa transition Atau setidaknya animasi dalam implementasi saat ini.