Lompat ke konten
Aback Tools Logo

Pembuat Jalur Klip

Buat bentuk jalur klip CSS secara visual - tanpa perlu menebak koordinat secara manual. Pilih dari 12 preset, seret titik poligon pada pratinjau langsung, dan salin CSS dalam satu klik.

Clip Path Generator
Build CSS clip-path shapes visually - choose a preset, drag polygon points, and copy the CSS.

Shape Presets

Live Preview

Previewpolygon1234++++

Drag the dots to reshape. Click + on edges to add points.

Shape Controls

Drag the colored dots on the preview to reshape. 4 points

P1
P2
P3
P4

CSS Output

clip-path
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
CSS declaration
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.

Fitur

  • Seret untuk Mengedit: Seret titik poligon langsung pada pratinjau visual untuk membentuk ulang secara real time. Tidak perlu menebak koordinat - lihat persis seperti apa jalur klip Anda saat Anda menyesuaikannya.
  • 12 Bentuk Preset: Mulai dari bentuk umum: lingkaran, segitiga, berlian, segi enam, bintang, hati, dan banyak lagi. Setiap preset disetel untuk titik awal terbaik, siap untuk disesuaikan lebih lanjut.
  • Output CSS Instan: Salin nilai jalur klip CSS atau deklarasi lengkap dengan satu klik. Semua browser modern didukung tanpa memerlukan awalan vendor.
  • Bekerja Offline: Semua pemrosesan terjadi di browser Anda - tidak ada server bolak-balik. Alat ini berfungsi bahkan tanpa koneksi internet setelah halaman dimuat.

Kasus Penggunaan

  • Pemangkasan Gambar Kreatif: Klip gambar ke dalam bentuk khusus - berlian, segi enam, bintang, atau poligon - untuk gambar mini portofolio unik, kisi galeri, dan visual bagian pahlawan.
  • Animasi Paralaks & Gulir: Tambahkan transisi jalur klip untuk menampilkan elemen saat pengguna menggulir. Animasikan di antara bentuk poligon untuk efek pemicu gulir yang halus dan modern.
  • Pembagi Kartu & Bagian: Gunakan jalur klip diagonal atau melengkung untuk membuat pemisah bagian antar blok halaman. Lebih baik daripada transformasi CSS dalam mempertahankan tata letak responsif.
  • Bingkai Profil & Avatar: Pangkas foto profil pengguna menjadi lingkaran, segi enam, atau bingkai poligon khusus untuk halaman tim, fitur sosial, dan direktori pengguna.
  • Desain Pahlawan & Halaman Arahan: Buat bagian pahlawan yang menarik perhatian dengan belahan diagonal, bentuk yang tumpang tindih, dan jalur klip asimetris yang memandu mata menelusuri halaman.
  • Aset Merek Geometris: Bangun bentuk geometris yang konsisten untuk ilustrasi merek, latar belakang ikon, dan elemen dekoratif yang sesuai dengan identitas merek Anda.

Pertanyaan yang Sering Diajukan

Jalur klip CSS digunakan untuk memotong (menyembunyikan) bagian suatu elemen sehingga hanya bentuk tertentu yang terlihat. Kegunaan umum meliputi: memotong gambar menjadi bentuk khusus (lingkaran, poligon, bintang), membuat pemisah bagian diagonal, menganimasikan transisi halaman, menampilkan efek hover, dan membuat elemen desain geometris tanpa SVG atau aset gambar.

Ya! clip-path adalah properti yang dapat dianimasikan. Anda dapat menggunakan transisi CSS atau @keyframes untuk menganimasikan antar nilai jalur klip. Untuk perubahan yang mulus, pastikan kedua keadaan menggunakan fungsi bentuk yang sama dengan jumlah titik yang sama (misalnya, poligon dengan 6 titik berubah menjadi poligon lain dengan 6 titik). Animasi antara tipe bentuk yang berbeda (lingkaran hingga poligon) mungkin tidak dapat diinterpolasi dengan lancar di semua browser.

Properti klip lama (tidak digunakan lagi) hanya berfungsi dengan elemen yang diposisikan secara mutlak dan menerima bentuk rect(). clip-path adalah pengganti modern yang mendukung bentuk lingkaran(), ellipse(), inset(), poligon(), dan path(), bekerja dengan elemen apa pun yang diposisikan, dan sepenuhnya dapat dianimasikan. Selalu gunakan jalur klip untuk proyek baru.

Untuk animasi poligon-ke-poligon yang mulus, kedua poligon harus memiliki jumlah titik yang sama. Browser menginterpolasi posisi setiap titik secara independen. Misalnya, segi enam 6 titik dapat dengan mulus berubah menjadi bintang 6 titik. Jika jumlah poinnya berbeda, animasinya akan berubah dengan cepat dan bukannya berubah dengan mulus.

Fungsi path() menerima data jalur SVG (sintaks atribut d) untuk membuat bentuk kliping yang sepenuhnya disesuaikan. Misalnya: jalur klip: jalur('M 50 0 L 100 50 L 50 100 L 0 50 Z'); menciptakan berlian. Ini memberi Anda kemungkinan bentuk tak terbatas di luar apa yang bisa dibuat oleh lingkaran/elips/inset/poligon. Catatan: path() memerlukan Safari 15.4+.

Tidak - jalur klip hanya memengaruhi rendering visual elemen. Kotak pembatas asli elemen masih menempati ruang yang sama di tata letak halaman. Peristiwa (klik, arahkan kursor) hanya akan diaktifkan dalam area terpotong yang terlihat di sebagian besar browser modern. Untuk tata letak yang benar-benar non-persegi panjang, pertimbangkan untuk menggunakan bentuk CSS atau bentuk luar.

Untuk poligon, lingkaran, elips, dan sisipan: tidak diperlukan awalan di browser modern (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+). Untuk path(): Safari 15.4+ tanpa awalan. Untuk browser yang sangat lama, Anda dapat menggunakan -webkit-clip-path sebagai cadangan. Alat ini menghasilkan jalur klip standar tanpa awalan yang berfungsi di semua browser saat ini.

Ya! clip-path dapat diterapkan ke elemen HTML apa pun, termasuk teks. Anda dapat mengklip teks ke dalam bentuk tertentu - namun teks itu sendiri terpotong, bukan dialirkan ulang. Untuk teks yang mengikuti jalur atau bentuk, gunakan bentuk CSS dengan bentuk di luar. Penggunaan yang populer adalah membuat animasi pengungkapan hanya teks dengan morphing jalur klip.