Menggunakan shape() untuk pemangkasan responsif

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Noam Rosenthal

Dipublikasikan: 8 April 2025

Properti clip-path memungkinkan Anda mengubah bentuk elemen dengan memangkas ke lingkaran, poligon, atau bahkan jalur SVG. Namun, sebelum Chrome 135 dan Safari 18.4, Anda harus memilih antara poligon responsif, dan bentuk yang lebih kompleks yang tidak responsif menggunakan jalur SVG. Dengan fungsi shape() baru, clip-path dapat memangkas elemen ke bentuk non-poligon yang juga responsif.

Membuat bentuk bendera

Sebagai contoh, bandingkan pembuatan bentuk bendera dengan clip-path: path() dan clip-path: shape().

Bentuk bendera tidak sepenuhnya poligon, karena batas atas dan bawahnya adalah kurva Bézier kubik, bukan garis lurus atau sudut membulat.

Buat flag dengan clip-path: path()

Bentuk seperti tanda ini dapat direpresentasikan menggunakan jalur SVG:

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

Untuk menguraikan hal ini, jalur SVG adalah serangkaian perintah jalur:

1. Pindahkan ke 0, 20.
2. Kurva ke 100, 20, menggunakan titik kontrol (25,0 dan 75, 40).
3. Garis vertikal ke 80.
4. Kurva ke 0, 80, menggunakan titik kontrol (75,100 dan 25,50).
5. Tutup jalur (baris ke 0,20).

Tindakan ini akan menggambar bentuk bendera, tetapi semua unitnya dalam piksel. SVG dapat menskalakan piksel tersebut ke kotak tampilan, tetapi dengan cara yang akan selalu terlihat seperti skala geometris dari seluruh bentuk.

Misalnya, jika Anda ingin seluruh persegi panjang diskalakan, tetapi mempertahankan tinggi dan lebar kurva 20 px, SVG tidak akan dapat melakukan tugas tersebut.

Buat flag dengan shape()

Bandingkan hasil yang sama menggunakan shape(). Fungsi bentuk menerima serangkaian perintah, mirip dengan perintah jalur SVG. Namun, perintah ini menerima panjang dan persentase CSS, dalam unit CSS apa pun.

CSS berikut mengonversi flag shape() dengan unit persentase:

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

Buat responsif

Dengan berbagai panjang CSS yang tersedia, Anda dapat memilih panjang yang akan digunakan untuk setiap koordinat.

Misalnya, untuk membuat seluruh ukuran tanda skala menurut ukuran elemen, tetapi mempertahankan tinggi kurva tetap, Anda dapat melakukan hal berikut:

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

Menambahkan properti dan animasi kustom

Dengan bentuk yang kini ditentukan dalam CSS, Anda juga dapat menggunakan properti kustom, untuk memudahkan manipulasi tinggi:

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Anda bahkan dapat menganimasikan properti CSS menggunakan deskripsi @property, dan membatasinya agar tidak melampaui batas:

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

Coba demo

Di Chrome 135 atau Safari 18.4, Anda dapat melihat bentuk bendera animasi yang dibuat menggunakan clip-path: shape() di demo CodePen ini.

Ringkasan

clip-path: shape() memungkinkan Anda memangkas elemen menggunakan bentuk arbitrer dan responsif, yang sebelumnya hanya dapat dilakukan menggunakan teknik seperti gradien konik atau SVG yang dibuat JavaScript.

Periksa spesifikasi untuk mengetahui sintaksis lengkapnya.

Saat ini, fitur ini hanya berfungsi untuk clip-path. Di masa mendatang, kami membayangkan penggunaan bentuk semacam ini untuk menetapkan bentuk batas elemen, yang akan membuka lebih banyak cara ekspresi non-persegi panjang.