Pengembang / Bentuk CSS

Generator Clip Path CSS: Poligon, Lingkaran, Elips, dan Inset

Buat potongan CSS dengan enam preset poligon, titik yang bisa diseret dan disesuaikan lewat keyboard, serta kontrol lingkaran, elips, dan inset. Pratinjau gradien atau gambar lokal, lalu salin CSS dalam persen atau piksel.

Generator Clip Path CSS: Poligon, Lingkaran, Elips, dan Inset: Memotong pratinjau mengikuti bentuk yang dipilih tanpa mengubah file gambar asli. Output persen mengikuti dimensi elemen. Output piksel menggunakan lebar dan tinggi referensi; pratinjau yang ditampilkan diskalakan agar sesuai dengan layar Anda. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Uji bentuk clip pathPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Seret titik bernomor, gunakan tombol panahnya, atau masukkan koordinat. Koordinat di bawah adalah persentase; output piksel menggunakan ukuran referensi.

Titik 1
Titik 2
Titik 3
Titik 4
Titik 5
Titik 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Bentuk berbasis persen berubah ukuran mengikuti elemen. Persentase lingkaran menggunakan diagonal ternormalisasi; persentase elips menggunakan lebar dan tinggi. Koordinat piksel tetap mengikuti dimensi referensi.

Pemotongan CSS

clip-path di MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Pemotongan mengubah area yang terlihat tanpa mengubah kotak tata letak elemen.

Koordinat bentuk dasar

W3C CSS Shapes Level 1, bentuk dasar: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Koordinat poligon dan radius elips ditentukan berdasarkan kotak referensi; persentase lingkaran menggunakan diagonal ternormalisasinya. Koordinat preset dan gradien adalah karya orisinal.

Cara menggunakannya

  1. Pilih bentuk dan preset, lalu tetapkan dimensi referensi.
  2. Seret titik poligon, gunakan tombol panah atau edit koordinat; atur kontrol untuk bentuk lainnya.
  3. Pilih output persen atau piksel, lalu salin CSS.

Privasi & batasan

Pratinjau gambar opsional tetap berada di perangkat Anda. Tidak ada yang di-upload.

Alat terkait

CSS gridBox ShadowFlexbox

Pertanyaan umum

Bagaimana cara mengedit titik tanpa menyeretnya?

Fokuskan handle bernomornya dan gunakan tombol panah, atau masukkan persentase X dan Y dalam daftar titik. Poligon memerlukan sedikitnya tiga titik.

Apakah tool ini mengekspor gambar yang sudah dipotong?

Tidak. Tool ini mengekspor CSS untuk elemen HTML. Gambar lokal hanya digunakan sebagai pratinjau.

Bagaimana persentase lingkaran diukur?

CSS menggunakan diagonal ternormalisasi, sqrt((width squared + height squared) / 2), sebagai referensi radius lingkaran. Radius elips menggunakan lebar dan tinggi secara terpisah.

Alat gratis · berjalan di browser anda · tanpa perlu akun