Softonic

Generator Clip Path CSS

Langkah 1 / 2
Berikutnya

Dengan clip-path, Anda dapat memotong elemen apa pun menjadi bentuk poligon, menciptakan gambar berbentuk, hero section asimetris, atau gelembung percakapan tanpa overlay SVG. Menulis koordinat polygon() dengan tangan mengundang kesalahan hitung. Generator ini menghasilkan deklarasi clip-path yang benar untuk empat bentuk bawaan: segitiga, belah ketupat, trapesium, dan heksagon. Pilih bentuk, buat kodenya, lalu salin.

Cara membuat clip-path

  1. 1

    Pilih bentuk

    Pilih salah satu dari empat bentuk bawaan: segitiga, belah ketupat, trapesium, atau heksagon.

  2. 2

    Buat CSS-nya

    Klik tombol dan alat ini menyusun aturan `clip-path: polygon(...)` untuk bentuk yang dipilih.

  3. 3

    Salin aturannya

    Salin hasilnya dan tempel ke stylesheet Anda. Persentase menjaga bentuk tetap responsif terhadap ukuran elemen.

  4. 4

    Baca koordinatnya

    Setiap pasangan angka adalah satu vertex: posisi x dan y dari sudut itu sebagai persentase dari kotak elemen.

  5. 5

    Terapkan

    `clip-path` berfungsi pada elemen apa pun di semua browser modern, dan bentuknya menyesuaikan ukuran elemen.

Lima fungsi bentuk

Fungsi Sintaks Pakai
inset() inset(10% 20% 10% 20% round 8px) Potongan persegi dengan inset dan sudut bulat opsional
circle() circle(50% at 50% 50%) Lingkaran
ellipse() ellipse(40% 25% at 50% 50%) Elips
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Poligon apa pun
path() path("M0 0 L100 0 L50 100 Z") Data path SVG (dukungan terbatas)

Potongan poligon umum

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / panah menunjuk ke kanan */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Potongan diagonal (hero section modern) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Diagonal hero-section mungkin yang paling banyak dipakai dari semuanya, ia memberi tampilan section bermiring modern tanpa SVG apa pun.

Menganimasikan clip-path

Clip-path menganimasi selama kedua state punya fungsi bentuk sama dengan jumlah titik sama. Poligon 4-vertex menganimasi mulus ke poligon 4-vertex lain; menambah atau menghapus vertex merusak interpolasi.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

Gunakan ini untuk efek reveal, distorsi hover halus, atau transisi halaman.

Clip-path vs. overflow: hidden

overflow: hidden memotong ke persegi panjang border-box (yang bisa dibulatkan dengan border-radius). clip-path memotong ke bentuk apa pun yang Anda definisikan dan memotong segalanya, termasuk bayangan dan outline. Jika Anda butuh bayangan tetap terlihat di luar bentuk, clip-path bukan yang Anda inginkan.

filter: drop-shadow() bisa menambahkan kembali bayangan yang mengikuti bentuk pada elemen clip-path, tetapi lebih lambat.

Performa

Clip-path diakselerasi GPU di browser modern, jadi clip-path beranimasi mulus. Pengecualiannya adalah path() dan poligon sangat kompleks (40+ vertex) yang jatuh ke rendering CPU di beberapa browser.

Aksesibilitas

Clip-path hanya mengubah apa yang terlihat. Screen reader, fokus keyboard, dan event pointer mengikuti box penuh elemen, bukan bentuk yang dipotong. Jika sebuah gambar dipotong menjadi bintang, teks alt dibaca normal. Jika sebuah tombol dipotong menjadi chevron, target klik-nya adalah persegi panjang penuh, bukan chevron yang terlihat, yang bisa menyebabkan klik tak sengaja pada ruang yang tampak kosong.

Untuk tombol dengan bentuk potongan tidak biasa, atur lebar/tinggi elemen ketat agar hitbox cukup cocok dengan area yang terlihat.

Pertanyaan yang Sering Diajukan

Semua browser modern (Chrome, Firefox, Safari, Edge) mendukung polygon(), circle(), ellipse(), dan inset(). path() didukung di Chrome 88+, Firefox 97+, dan Safari 13.1+. IE tidak mendukung apa pun tetapi penggunaannya di bawah ambang batas untuk sebagian besar situs sekarang.

Karena clip-path memotong bayangan bersama segala yang lain. Gunakan filter: drop-shadow(), ia mengikuti bentuk yang dipotong dan menjaga bayangan tetap terlihat.

Hanya antara fungsi bentuk sama dengan jumlah titik sama. Poligon 4 titik menganimasi ke poligon 4 titik lain. Menambah atau menghapus titik, atau berganti antar fungsi (poligon ke lingkaran), merusak interpolasi.

Tidak, event pointer tetap menuju persegi panjang penuh elemen. Tombol berbentuk bintang punya area klik persegi panjang, termasuk sudut transparan. Pertimbangkan pointer-events: none pada ::before atau gunakan elemen berukuran ketat jika ini penting.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Decoder JWT

Dekode header dan payload JWT, tampilkan klaim beserta pemeriksaan masa kedaluwarsa dan algoritma tanda tangan, lalu verifikasi menggunakan rahasia bersama atau kunci publik.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Alat ini tersedia dalam bahasa lain