Ringkasan cara memanfaatkan fungsi `shape()` baru di CSS

• Fungsi CSS shape() mulai didukung di browser Chromium dan WebKit
• Berbeda dari path() yang sudah ada, kini bentuk kompleks dapat didefinisikan dengan sintaks dan satuan CSS yang lebih mudah dibaca
• Saat membuat bentuk kompleks di clip-path, ini bisa diimplementasikan dengan pendekatan berbasis perintah berbahasa Inggris alih-alih koordinat SVG
• Dengan perintah baru seperti line, arc, dan curve, garis, kurva, dan arc dapat ditulis dengan lebih ringkas
• shape() masih memiliki dukungan animasi yang terbatas, tetapi perubahan dinamis yang merespons hover/focus tetap memungkinkan

---

Ikhtisar

• Fungsi CSS shape() digunakan bersama clip-path untuk memungkinkan clipping bentuk kompleks di browser
• Sebelumnya bentuk dasar seperti circle, ellipse, dan polygon bisa digunakan, tetapi bentuk bebas hanya dapat dibuat dengan path()
• Karena path() mengharuskan koordinat dan perintah SVG dimasukkan apa adanya, keterbacaan dan kurva belajarnya menjadi lebih tinggi

Karakteristik fungsi shape()

• Dapat menyusun bentuk vektor dengan gaya khas CSS
• Titik awal ditentukan dengan kata kunci arah (from top left) atau nilai koordinat (from 0 0)
• Bentuk terdiri dari serangkaian perintah. Contoh: line, vline, arc, curve, smooth

Penjelasan perintah utama

• line
  • Arti: menggambar garis dari titik awal
  • Cara pakai: tentukan posisi relatif dengan kata kunci by
  • Contoh: line by -2px 3px
• vline
  • Arti: menggambar garis vertikal
  • Cara pakai: tentukan posisi absolut dengan to, posisi relatif dengan by
  • Contoh: vline to 50px
• hline
  • Arti: menggambar garis horizontal
  • Cara pakai: tentukan posisi absolut dengan to, posisi relatif dengan by
  • Contoh: hline to 95%
• arc
  • Arti: menggambar kurva berbentuk elips
  • Cara pakai:
    • to: titik akhir arc
    • with: arah kemiringan arc (horizontal/vertikal)
    • of: jari-jari elips tempat arc berada (horizontal/vertikal)
  • Contoh: arc to 10% 50% of 1%
• curve
  • Arti: menggambar kurva Bézier
  • Cara pakai:
    • to: titik akhir kurva
    • with: titik kontrol kurva (mengatur kelengkungan)
  • Contoh: curve to 0% 100% with 50% 0%
• smooth
  • Arti: menggambar kurva halus (kurva Bézier yang tersambung)
  • Cara pakai:
    • to: titik akhir
    • by: koordinat relatif
    • with: titik kontrol

Hal lain yang perlu diperhatikan

• shape() dapat berubah secara dinamis pada status hover/focus
• Di browser saat ini, animasi transition belum berfungsi
• Fungsi perhitungan calc() juga bisa digunakan

Tautan referensi

• Spesifikasi resmi