Generator Clip-Path CSS
Buat pernyataan CSS clip-path — lingkaran, elips, inset, atau bentuk poligon (segitiga, heksagon, bintang, panah, dan lainnya) dengan daftar poin kustom yang dapat diedit — dengan pratinjau langsung dari bentuk yang dipotong.
Input
Pilih bentuk dasar atau preset poligon, atau pilih Poligon kustom untuk mengedit titik simpul secara manual.
Output
Bentuk yang dipotong Anda akan muncul di sini.
Div dengan gaya inline yang sesuai dengan pratinjau di atas — tempel di mana saja.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-clip-path-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "circle",
"circleRadius": "50",
"circleCx": "50",
"circleCy": "50"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-clip-path-generator` tool (CSS Clip-Path Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-clip-path-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Clip-Path CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa itu clip-path?
clip-path adalah properti CSS yang menyembunyikan semua yang berada di luar bentuk yang Anda tentukan, meninggalkan hanya bagian di dalamnya terlihat — tidak perlu editor gambar, file mask, atau markup tambahan. Ini adalah cara Anda mendapatkan avatar melingkar, lencana heksagonal, pembagi bagian yang miring, tombol berbentuk panah dan callout gelembung ucapan menggunakan CSS saja pada <div> atau <img> biasa.
Alat ini membangun pernyataan clip-path siap tempel dari pemilih bentuk, dengan pratinjau langsung dari persis apa yang dihasilkan CSS.
Cara menggunakan alat ini
- Pilih Bentuk — bentuk dasar (Lingkaran, Elips, Inset) atau salah satu preset poligon (Segitiga, Belah Ketupat, Pentagon, Heksagon, Oktagon, Bintang, Pesan, Panah, Salib, Chevron, Jajar Genjang, Trapesium).
- Sederhanakan:
- Lingkaran — Jari-jari dan Pusat X/Y, semuanya sebagai persentase dari kotak elemen itu sendiri.
- Elips — Jari-jari X/Y independen ditambah Pusat X/Y.
- Inset — Inset Atas/Kanan/Bawah/Kiri (seberapa jauh setiap tepi ditarik masuk dari kotak) ditambah Jari-jari Sudut opsional untuk persegi panjang bulat.
- Preset poligon adalah bentuk tetap — pilih Poligon kustom sebagai gantinya untuk mengedit daftar simpul secara manual (lihat di bawah).
- Untuk Poligon kustom, edit bidang Titik Poligon: daftar terpisah koma dari pasangan
x% y%, satu per simpul, mengelilingi bentuk secara berurutan (minimal 3). Setiap preset poligon di atas benar-benar hanya salah satu daftar ini di bawah tenda — salin koordinatpolygon(...)output preset dalam ini sebagai titik awal jika Anda ingin menyesuaikan satu. - Salin CSS dan terapkan ke elemen apa pun —
clip-pathberfungsi pada gambar, div, tombol, apa pun dengan kotak. Pratinjau menunjukkan persis tampilannya; Snippet HTML di bawahnya adalah markup yang sama dengan<div>dengan gaya inline mandiri yang dapat Anda tempel di mana pun stylesheet tidak nyaman.
Mengapa clip-path dan -webkit-clip-path keduanya?
Properti clip-path tanpa awalan didukung di semua browser saat ini, tetapi bentuk -webkit- berprefiksa disertakan bersama untuk browser berbasis WebKit yang lebih lama yang hanya mengenali versi berprefiksa — garis kompatibilitas murah yang tidak memerlukan biaya di browser modern.
FAQ
Dapatkah saya menganimasi clip-path?
Ya — clip-path dapat dianimasikan, jadi transisi antara dua nilai tipe bentuk yang sama (misalnya dua polygon()s dengan jumlah poin yang sama, atau dua circle() jari-jari) menganimasikan lancar dengan CSS transition biasa. Alat ini menghasilkan nilai statis tunggal; tambahkan transition: clip-path 0.3s ease; Anda sendiri bersama dengannya.
Apakah semua simpul poligon perlu menggunakan %?
Alat ini selalu mengeluarkan persentase, yang diskalakan dengan ukuran elemen itu sendiri (pilihan paling portabel). Anda dapat mengedit CSS yang disalin secara manual untuk menggunakan px jika Anda memerlukan bentuk ukuran tetap sebagai gantinya.
Mengapa persentase poligon untuk preset Bintang terlihat "salah"? Bintang 10 poin memiliki poin yang bergantian antara jari-jari luar dan jari-jari bagian dalam yang lebih pendek dari pusat bentuk — persentasenya tidak dimaksudkan untuk terlihat seragam, mereka melacak paku bintang dan takik dalam.
Apakah clip-path memengaruhi target klik/hover?
Tidak — mengklik di luar area yang terlihat dipotong masih mengenai kotak asli elemen (tidak dipotong) di sebagian besar browser kecuali Anda juga membatasi peristiwa pointer sendiri (misalnya pointer-events: none ditambah overlay yang dipotong, atau mengerjakan ulang tata letak sehingga kotak ADALAH bentuknya).
Privasi
Semuanya terjadi di browser Anda. Bentuk pilihan Anda dan pengaturan tidak pernah dikirim ke server — CSS dan pratinjau dibuat dan diperbarui secara lokal saat Anda menyesuaikan kontrol.