Generator Jalur Pemotongan CSS Clip-Path

Hasilkan kode jalur pemotongan CSS clip-path secara visual, mendukung bentuk poligon, lingkaran, elips, dan lainnya, serta dapat memproses gambar secara massal

Laporan bug

Mode eksekusi browser: Data Anda diproses di browser dan tidak diunggah ke server.

Kecepatan dan stabilitas: Kecepatan pemrosesan bergantung pada perangkat dan browser Anda. Untuk pekerjaan batch besar, versi desktop mungkin lebih stabil.

Memuat alat, harap tunggu...

Jika alat online tidak dapat dimuat atau dijalankan, coba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Atur jalur potong dulu, lalu salin kode atau proses gambar massal

Setelah memilih bentuk preset, Anda dapat menyeret titik kontrol poligon, atau beralih ke lingkaran, elips, persegi inset dan menyesuaikan parameter. Proses massal memakai jalur saat ini. Saat mengunggah banyak gambar, hanya 20 pertama ditampilkan, tetapi semua akan diproses.

Info jalur saat ini

Jenispolygon

Titik kontrol3

Tips: selesaikan pengaturan jalur dulu, lalu salin kode atau proses gambar.

Pratinjau langsung Dalam mode poligon, seret titik kontrol biru; koordinat akan otomatis membuat CSS.

Koordinat: relatif ke elemen, kiri atas adalah 0% 0%. polygon(50% 0%, 100% 100%, 0% 100%)

Bentuk dan preset Pilih tipe dulu, lalu atur parameter

Tipe bentuk

Kategori preset

Parameter jalur Nilai mendukung persen

Teks koordinat

Jari-jari

Pusat X

Pusat Y

Radius horizontal

Radius vertikal

Pusat X

Pusat Y

atas

kanan

bawah

kiri

Sudut bulat

Pratinjau & output Latar hanya memengaruhi pratinjau dan ekspor gambar

Lebar pratinjau (px)

Tinggi pratinjau (px)

Warna A

Warna B

Sudut gradasi

Pratinjau Gambar

Tampilkan batas elemen Sertakan prefiks -webkit Buat selektor kelas

Buat kode

Kode diperbarui otomatis sesuai setelan.

Terapkan jalur saat ini secara massal Atur jalur di langkah sebelumnya dulu, lalu pilih pemrosesan gambar.

Klik atau seret gambar ke sini Mendukung format umum seperti JPG, PNG, WebP, GIF, BMP

Belum ada gambar dipilih.

Pengaturan output PNG mendukung latar transparan

Format output

Mode ukuran

Batasi sisi panjang (px)

Lebar kustom (px)

Tinggi kustom (px)

Kualitas output92%

Area luar potongan transparan Gunakan jalur saat ini

Menunggu proses.

Pratinjau gambar & hasil Setelah unggah tampil 20 pertama; pemrosesan mencakup semua file.

Gambar menunggu diproses0 gambar

Pilih gambar untuk melihat thumbnail.

Hasil proses0 gambar

Thumbnail hasil ditampilkan setelah selesai.

Petunjuk

Petunjuk Penggunaan Perangkat Lunak

Desain jalur pemotongan: Setelah masuk ke alat, pilih jenis bentuk pada langkah “Desain Jalur” terlebih dahulu. Anda dapat menggunakan poligon, lingkaran, elips, atau persegi panjang inset.
Pilih bentuk preset: Anda dapat memilih preset dari bentuk dasar, panah dan ikon, serta bentuk dekoratif, lalu menyesuaikan parameternya sesuai kebutuhan.
Edit parameter jalur: Untuk poligon, Anda dapat menyeret titik kontrol atau memasukkan koordinat persentase di kotak teks koordinat; untuk lingkaran, elips, dan persegi panjang inset, Anda dapat langsung mengisi radius, titik pusat, margin, dan sudut membulat.
Atur efek pratinjau: Anda dapat menyesuaikan lebar dan tinggi pratinjau, warna gradasi, sudut gradasi, atau memilih gambar sebagai konten pratinjau.
Salin kode CSS: Setelah memastikan hasilnya, klik “Salin clip-path” atau “Salin CSS”. Anda dapat memilih apakah akan menyertakan prefiks -webkit dan selektor kelas.
Proses gambar secara massal: Klik “Langkah berikutnya: Pemrosesan massal”, pilih beberapa gambar, atur format keluaran, kualitas, dan mode ukuran, lalu mulai proses.
Unduh hasil: Setelah pemrosesan selesai, klik “Unduh semua hasil ZIP”. File keluaran akan sebisa mungkin menggunakan nama file asli, dan jika ada nama yang sama, angka akan otomatis ditambahkan untuk membedakannya.

Pertanyaan Umum

Jawab: clip-path digunakan untuk memotong elemen menjadi bentuk tertentu, sering digunakan untuk tampilan gambar dengan bentuk khusus, desain tepi kartu, bentuk tombol, elemen dekoratif web, dan efek interaktif.

Jawab: polygon membuat poligon melalui beberapa titik koordinat; circle membuat area pemotongan berbentuk lingkaran; ellipse membuat area pemotongan berbentuk elips; inset membuat persegi panjang inset dan mendukung parameter sudut membulat.

Jawab: Koordinat menggunakan persentase, misalnya 50% 0% mewakili posisi tengah bagian atas elemen, dan 100% 100% mewakili sudut kanan bawah. Setiap titik dipisahkan dengan koma, dan diperlukan minimal 3 titik.

Jawab: -webkit-clip-path digunakan untuk kompatibilitas dengan sebagian lingkungan berbasis WebKit. Untuk meningkatkan cakupan kompatibilitas, Anda dapat mempertahankan penulisan dengan prefiks dan penulisan standar sekaligus.

Jawab: Anda dapat memilih format gambar umum sebagai input, dan output mendukung PNG, JPEG, dan WebP. PNG cocok untuk mempertahankan area transparan, JPEG cocok untuk menghasilkan file yang lebih kecil, dan WebP cocok untuk menyeimbangkan ukuran file dan kualitas gambar.

Jawab: Alat ini akan berusaha mempertahankan nama file asli dan mengganti ekstensi sesuai format output. Jika ada file dengan nama yang sama, angka akan ditambahkan di akhir nama file untuk mencegah hasil saling menimpa.