Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Desain · utilitas Lokal

Generator Clip Path CSS

CSS Clip Path Generator

Edit titik poligon dengan menyeret, papan ketik, atau koordinat. Mulai dari empat prasetel dan salin deklarasi clip-path atau CSS lengkap secara lokal.

Jalur tugas / dari masukan ke hasil

Pilih bentuk awal

Berjalan lokal · Tidak ada yang diunggah

Contoh CSS clip-path yang dapat dicoba

Bandingkan empat poligon, lalu gunakan pengaturan yang sama di ruang kerja. Setiap pratinjau memakai poligon yang sama dengan CSS-nya. Ukuran awal kotak yang diekspor adalah 240 × 180 px.

Sesuaikan pengaturan ini di ruang kerja

Segi enam

Gunakan segi enam untuk avatar tim atau lencana yang berulang.

Titik horizontal
24%
Titik vertikal
50%
Warna bentuk
#0f4cff
Lihat CSS
.clipped-shape {
  width: 240px;
  aspect-ratio: 4 / 3;
  background: #0f4cff;
  -webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
  clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}

Belah ketupat

Coba bentuk wajik miring untuk gambar kecil atau hiasan.

Titik horizontal
35%
Titik vertikal
50%
Warna bentuk
#0f4cff
Lihat CSS
.clipped-shape {
  width: 240px;
  aspect-ratio: 4 / 3;
  background: #0f4cff;
  -webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
  clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}

Jajargenjang

Gunakan bentuk miring dengan empat titik untuk menghias kartu.

Titik horizontal
18%
Titik vertikal
40%
Warna bentuk
#0f4cff
Lihat CSS
.clipped-shape {
  width: 240px;
  aspect-ratio: 4 / 3;
  background: #0f4cff;
  -webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
  clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}

Chevron

Arahkan tepi banner ke bagian berikutnya.

Titik horizontal
18%
Titik vertikal
50%
Warna bentuk
#0f4cff
Lihat CSS
.clipped-shape {
  width: 240px;
  aspect-ratio: 4 / 3;
  background: #0f4cff;
  -webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
  clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}

Terapkan bentuk pada gambar

Mulai dengan CSS salah satu bentuk di atas, lalu tambahkan aturan berikut setelahnya. Ganti jalur gambar dan teks alternatif dengan milik Anda. Kotak mempertahankan rasio 4:3; object-fit: cover memotong gambar agar mengisi kotak tanpa meregangkannya. Koordinat persentase mengikuti ukuran kotak.

<img class="clipped-shape"
  src="/your-image.jpg"
  alt="Deskripsikan gambar Anda"
  width="240" height="180">
.clipped-shape {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

Tersedia empat templat dan dua penggeser. Penyuntingan titik bebas, impor jalur SVG, dan kurva tidak didukung. Gunakan Salin CSS atau Unduh .css di ruang kerja untuk menyimpan aturan yang sudah disesuaikan.

Cara kerja Generator Clip Path CSS, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara membuat poligon clip-path CSS

  1. 01

    Pilih bentuk awal

    Pilih segi enam, belah ketupat, jajaran genjang, atau Chevron. Dua penggeser mengatur prasetel; mengedit satu titik beralih ke poligon khusus.

  2. 02

    Edit titik

    Seret titik bernomor atau masukkan koordinat. Tombol panah menggeser titik yang difokuskan 1%; Shift + panah menggeser 10%. Tambah menyisipkan titik tengah setelah titik terpilih.

  3. 03

    Atur warna

    Contoh lengkap memakai warna pilihan, lebar 240px, dan rasio 4:3. Editor menyesuaikan layar.

  4. 04

    Periksa bentuk

    Periksa setiap sisi sebelum ekspor. Pegangan bernomor hanya untuk mengedit dan tidak masuk ke CSS.

  5. 05

    Pilih format

    Keluaran CSS: Hanya deklarasi clip-path / CSS contoh lengkap. Contoh lengkap memakai warna pilihan, lebar 240px, dan rasio 4:3. Editor menyesuaikan layar.

  6. 06

    Terapkan pada tata letak

    Koordinat persen mengikuti ukuran elemen. Tempel deklarasi ke aturan yang ada atau gunakan kelas .clipped-shape. Periksa di desktop dan ponsel.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Generator Clip Path CSS menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Kapan Generator Clip Path CSS berguna

Buat potongan oranye enam titik

Dalam uji browser lokal 2026-09-24, mulai dari Segi enam bawaan (horizontal 24%, vertikal 50%). Pilih titik 1, ubah X dari 24% ke 30%, lalu atur warna #ff6600. Pratinjau menjadi poligon oranye enam titik dengan clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); lima titik lain tetap berurutan.

Salin aturan yang sesuai pratinjau

CSS contoh lengkap memakai .clipped-shape dengan lebar 240px, rasio 4 / 3, latar #ff6600, serta -webkit-clip-path dan clip-path. Hasil Salin CSS sama dengan unduhan toolars-clip-path.css (240 byte). Pada mode deklarasi saja, hasil salinan tepat clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 byte UTF-8). Periksa potongan pada tata letak Anda.

Perbaiki titik di luar batas

Atur X titik 1 menjadi 101%. Pada 2026-09-24, ruang kerja menyatakan koordinat harus terhingga dan dalam 0–100%; pratinjau serta CSS kosong, dan salin/unduh dinonaktifkan. X = 30% memulihkan polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%). Sisi yang bersilangan tidak diperbaiki otomatis.

Apa yang sebenarnya dilakukan Generator Clip Path CSS

Mulai dari empat prasetel, lalu tambah, hapus, atau geser titik poligon. Ekspor deklarasi clip-path atau CSS contoh lengkap. Koordinat persen mengikuti ukuran elemen. Tempel deklarasi ke aturan yang ada atau gunakan kelas .clipped-shape. Periksa di desktop dan ponsel.

Pertanyaan umum

Apa isi kedua format?
Hanya deklarasi clip-path: clip-path: polygon(…). CSS contoh lengkap: .clipped-shape — width, aspect-ratio, background, -webkit-clip-path, clip-path. Contoh lengkap memakai warna pilihan, lebar 240px, dan rasio 4:3. Editor menyesuaikan layar.
Bagaimana memulihkan prasetel?
Pilih salah satu dari empat prasetel untuk mengganti titik khusus. Reset memulihkan segi enam, warna, dan CSS lengkap; contoh membuka Chevron.
Bentuk dan batas apa yang didukung?
polygon() dengan 3–32 titik dan X/Y 0–100%. Lingkaran, elips, inset, jalur SVG, impor CSS, dan animasi tidak disertakan.
Bisakah mengunggah gambar untuk pratinjau?
Editor menampilkan warna datar. Terapkan CSS ekspor ke gambar atau latar proyek untuk memeriksa potongan.
Apakah data diunggah atau disimpan?
Koordinat dan CSS tetap di tab ini. Tidak ada penyimpanan ruang kerja atau telemetri konten. Salin atau unduh sebelum keluar.
Apa yang terjadi pada koordinat tidak valid?
Contohnya X = 101% di luar rentang 0–100%: bentuk dan CSS dikosongkan dan ekspor dinonaktifkan. Ubah X ke 50% untuk pulih, lalu periksa poligon sebelum menyalin. Reset juga memulihkan bentuk bawaan.
Bisakah sisi berpotongan?
Ya. Titik dihubungkan sesuai urutan dan CSS menggunakan aturan isi nonzero bawaan. Perpotongan, titik duplikat, atau bentuk yang runtuh tidak diperbaiki otomatis.

Baca juga

Lanjutkan di Desain

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Loader CSS

CSS Loader Generator

Rancang loader CSS cincin orbit atau tiga titik dengan ukuran, durasi, dan warna yang dapat disetel, lalu salin kode lengkap dengan blok prefers-reduced-motion.

Buat

Generator Checkbox CSS

CSS Checkbox Generator

Beri gaya kotak centang HTML asli dengan ukuran, border, dan warna pilihan, lalu salin CSS yang mempertahankan fokus keyboard dan status disabled.

Buat

Generator Switch CSS

CSS Switch Generator

Rancang sakelar alih murni CSS dengan geometri lintasan dan kenop yang dapat diukur, lalu salin kodenya dengan dukungan reduced-motion — tanpa JavaScript.

Buat

Generator Pola Latar CSS

CSS Background Pattern Generator

Susun pola latar titik, kisi, atau diagonal dari gradien CSS murni tanpa berkas gambar, dengan ukuran ubin, lebar tanda, dan dua warna yang dapat disetel.

Buat