Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator CSS Clip-Path

WarnaPengembang

IKLAN · MENGHAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · MENGHAPUS?

Memandu

Generator CSS Clip-Path

Buat bentuk clip-path CSS secara visual dengan editor drag-and-drop yang intuitif. Bangun poligon, lingkaran, elips, dan bentuk inset, lalu salin CSS yang dihasilkan langsung ke stylesheet Anda.

Cara Penggunaan

Pilih tipe bentuk atau mulai dari template prasetel. Seret titik kontrol untuk menyesuaikan bentuk secara visual di kanvas pratinjau. Kode clip-path CSS diperbarui secara real-time saat Anda mengedit. Ketika Anda puas dengan hasilnya, salin kode CSS yang dihasilkan atau ekspor sebagai SVG.

Fitur

Editor drag-and-drop visual – Buat bentuk dengan memindahkan titik kontrol langsung di kanvas
Berbagai tipe bentuk – Poligon, lingkaran, elips, dan inset
Template prasetel – Mulai dari bentuk umum seperti segitiga, bintang, panah, dan lainnya
Urungkan dan Ulangi – Dukungan riwayat penuh untuk pengeditan non-destruktif
Tempel ke kisi – Penempatan titik yang presisi dengan penempelan kisi yang dapat dikonfigurasi
Ekspor SVG – Unduh bentuk Anda sebagai file SVG
Output CSS langsung – Salin properti clip-path yang dihasilkan secara instan

IKLAN · MENGHAPUS?

 Tanya Jawab Umum

Apa itu clip-path CSS dan cara kerjanya?

Clip-path CSS mendefinisikan wilayah kliping yang menentukan bagian mana dari suatu elemen yang terlihat. Apa pun di luar bentuk clip-path disembunyikan. Ini mendukung bentuk dasar (lingkaran, elips, inset, poligon) dan definisi jalur SVG. Berbeda dengan overflow:hidden yang hanya memotong ke batas persegi, clip-path dapat membuat area terlihat non-persegi yang kompleks untuk tata letak dan efek visual yang kreatif.
Apa perbedaan antara clip-path dan mask di CSS?

Clip-path menciptakan tepi keras — piksel sepenuhnya terlihat atau sepenuhnya tersembunyi berdasarkan apakah mereka berada di dalam bentuk yang ditentukan. Mask CSS menggunakan gambar atau gradien untuk mengontrol transparansi, memungkinkan tepi lembut dan transparansi parsial. Clip-path lebih sederhana dan lebih berkinerja untuk bentuk geometris, sementara mask menawarkan kontrol artistik yang lebih besar dengan gradien dan saluran alpha.
Bagaimana cara kerja koordinat poligon CSS?

Koordinat poligon dalam clip-path menggunakan nilai persentase atau panjang relatif terhadap kotak pembatas elemen. Setiap titik didefinisikan sebagai pasangan x,y di mana 0% 0% adalah sudut kiri atas dan 100% 100% adalah kanan bawah. Titik-titik dihubungkan secara berurutan untuk membentuk bentuk. Misalnya, polygon(50% 0%, 100% 100%, 0% 100%) membuat segitiga. Bentuk ditutup secara otomatis dengan menghubungkan titik terakhir kembali ke titik pertama.