Pembuat Jalur Potong CSS Buat bentuk jalur potong CSS dengan preset poligon, lingkaran, dan elips.

🎨

Pembuat Jalur Potong CSS

Buat bentuk jalur potong CSS dengan preset poligon, lingkaran, dan elips.

Pilih bentuk preset

Pilih dari preset bawaan seperti segitiga, heksagon, bintang, lingkaran, atau elips.

Sesuaikan jalur

Edit nilai clip-path secara langsung untuk mengontrol bentuk dengan presisi.

Salin CSS

Pratinjau bentuk yang dipotong dan salin CSS dengan awalan webkit yang disertakan.

Loading tool...

What Is Pembuat Jalur Potong CSS?

Generator Jalur Pemotongan CSS membuat masker pemotongan untuk elemen HTML menggunakan properti clip-path. Clip-path mendefinisikan wilayah yang terlihat untuk sebuah elemen-apa pun di luar jalur tersebut akan disembunyikan. Alat ini mendukung beberapa fungsi bentuk: poligon untuk bentuk kustom multi-titik, lingkaran untuk klip lingkaran, elips untuk bentuk oval, dan inset untuk klip persegi panjang dengan pemolesan opsional. Perpustakaan bentuk preset termasuk segitiga, trapezoid, parallelogram, rhombus, pentagon, heksagon, dan bintang. Anda juga dapat mengedit nilai clip-path secara langsung untuk bentuk kustom. CSS yang dihasilkan mencakup awalan -webkit-clip-path untuk dukungan browser yang lebih luas. Clip-path sangat kuat untuk membuat tata letak non-persegi panjang, masker gambar, pembagi bagian kreatif, dan bentuk elemen UI unik.

Why Use Pembuat Jalur Potong CSS?

Perpustakaan preset luas termasuk poligon, lingkaran, dan bintang
Pengeditan langsung nilai clip-path untuk bentuk kustom
Termasuk awalan webkit untuk dukungan browser yang lebih luas
Pratinjau waktu nyata dengan warna latar belakang yang dapat disesuaikan

Common Use Cases

Topeng Gambar

Potong gambar menjadi bentuk kustom seperti lingkaran, heksagon, atau bintang.

Pembagi Bagian

Buat transisi bagian yang miring atau melengkung dengan clip-path.

Tata Letak Kreatif

Bangun area konten non-rectangular untuk desain halaman unik.

Foto Profil

Potong avatar pengguna menjadi bentuk heksagonal atau bulat.

Technical Guide

Properti clip-path CSS menerima beberapa fungsi bentuk: polygon() mendefinisikan sebuah bentuk menggunakan pasangan koordinat sebagai persentase atau panjang. circle() membuat klip lingkaran dengan radius dan posisi pusat. ellipse() membuat oval dengan radii horizontal dan vertikal. inset() membuat klip persegi panjang dengan border-radius opsional. Fungsi poligon menerima jumlah pasangan koordinat x y yang tidak terbatas, sehingga menjadikannya paling fleksibel. Koordinat relatif terhadap elemen-0% 0% adalah sudut kiri atas dan 100% 100% adalah sudut kanan bawah. Untuk animasi, clip-path dapat ditransisikan jika fungsi bentuk yang sama digunakan dengan jumlah titik yang sama. Dukungan browser cukup baik di browser modern, tetapi awalan -webkit- disarankan untuk Safari. Clip-path tidak mempengaruhi tata letak-elemen mempertahankan dimensi model kotak aslinya.

Tips & Best Practices

1
Mulai dengan preset dan modifikasi nilai-nilai untuk bentuk kustom
2
Gunakan jumlah titik poligon yang sama untuk transisi animasi
3
Gabungkan dengan transisi CSS untuk efek reveal dan morf
4
clip-path bekerja dengan baik pada gambar dan elemen latar belakang

Related Tools

Pembuat Segitiga CSS

Buat segitiga CSS menggunakan teknik border dengan kontrol arah dan warna.

🎨 CSS & Design

Pembuat Blob CSS

Buat bentuk bola organik sebagai SVG dengan pengisian gradien dan randomisasi.

🎨 CSS & Design

Pembangkit Gelombang CSS

Buat pembagi bagian gelombang SVG dengan gelombang, tinggi, dan warna yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Pemisah CSS

Buat pemisah bagian CSS dengan beberapa gaya, termasuk gradien, bayangan, dan zigzag.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah clip-path mempengaruhi tata letak elemen?

Tidak, elemen tetap mempertahankan model kotak penuh. Hanya rendering yang terlihat yang dipengaruhi oleh klip.

Q Bisakah saya menganimasikan clip-path?

Ya, clip-path mendukung transisi CSS ketika fungsi dan jumlah titik yang sama digunakan dalam kedua keadaan.

Q Apakah clip-path didukung di semua browser?

Browser modern mendukung clip-path. Awalan -webkit- memastikan kompatibilitas Safari. IE tidak mendukung clip-path.

Q Bisakah saya memotong teks dengan clip-path?

Ya, clip-path bekerja pada elemen HTML apa pun termasuk wadah teks. Gunakan -webkit-background-clip: text untuk pemotongan teks khusus.

Q Apa perbedaan antara clip-path dan mask?

clip-path menggunakan fungsi bentuk untuk klip tepi keras. CSS mask menggunakan gambar atau gradien dan mendukung tepi lembut dan transparansi sebagian.

About This Tool

Pembuat Jalur Potong CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.