CSS Corner Cutter
Buat deklarasi CSS clip-path/mask yang memotong, mengalur, atau membuat takik pada setiap sudut kotak secara independen — per sudut atau gaya dan ukuran terpadu, dalam px atau %, dengan pratinjau langsung.
Input
Unit ukuran untuk setiap pemotongan sudut di bawah.
Saat diaktifkan, gaya dan ukuran Semua Sudut berlaku untuk setiap sudut.
Ukuran persen di atas 50 dikunci sehingga sudut yang berlawanan tidak dapat tumpang tindih.
Output
Kotak dengan sudut terpotong Anda akan muncul di sini.
div dengan gaya inline yang cocok 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-corner-cutter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"unit": "px",
"linked": "true",
"allStyle": "bevel",
"allSize": "24"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-corner-cutter` tool (CSS Corner Cutter) 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-corner-cutter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Corner Cutter — 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 sudut yang "dipotong"?
border-radius hanya menghasilkan sudut yang halus dan bulat. Sudut yang dipotong berbeda — ia menghilangkan sebidang material dari kotak alih-alih membulatkannya, dan ada tiga bentuk umum untuk baji itu:
- Bevel — satu garis miring, tampilan "sudut terpotong" klasik pada kartu, tombol, dan label harga.
- Notch — pemotongan sudut siku-siku, memberikan siluet tab/stub tiket yang bertingkat.
- Scoop — lengkungan cekung yang melengkung ke dalam dari sudut, seperti gigitan yang diambil dari itu.
Alat ini membangun deklarasi CSS yang siap tempel untuk kombinasi apa pun dari ketiganya, secara independen per sudut, dengan pratinjau langsung.
Cara menggunakan alat ini
- Pilih Unit (
pxatau%) — berlaku untuk setiap ukuran sudut di bawah. - Biarkan Sama untuk semua sudut aktif untuk menetapkan satu Gaya dan Ukuran untuk keempat sudut sekaligus, atau matikan untuk menetapkan setiap sudut (Sudut Atas Kiri, Sudut Atas Kanan, Sudut Bawah Kanan, Sudut Bawah Kiri) secara independen — campur bevel, notch, dan scoop dengan bebas, atau biarkan ukuran sudut pada
0untuk menjaga sudut tetap persegi. - Salin CSS dan terapkan ke elemen apa pun dengan lebar/tinggi yang ditentukan. Pratinjau menunjukkan persis tampilannya; Snippet HTML di bawahnya adalah markup yang sama dengan
<div>dengan gaya inline yang mandiri yang dapat Anda tempel di mana pun stylesheet tidak nyaman.
Mengapa dua teknik CSS yang berbeda?
Bevel dan notch keduanya terbuat dari garis lurus, jadi dinyatakan sebagai poin tambahan dalam clip-path: polygon(...) — teknik yang sama di balik Generator Clip-Path CSS library bentuk. Scoop berbeda: clip-path polygon() hanya dapat menggambar tepi lurus antara poin, jadi tidak ada cara untuk membungkuk ke dalam dengan lengkungan mulus. Mengukir kurva cekung memerlukan mask-image yang dibangun dari radial-gradient — satu per sudut, transparan di dalam radius potong dan buram di luarnya. Karena clip-path dan mask adalah properti independen yang keduanya berlaku pada elemen yang sama, alat ini memancarkan kedua blok bersama-sama kapan pun Anda mencampur potongan lurus di beberapa sudut dengan scoop di sudut lain; browser merender persimpangan mereka.
FAQ
Apakah ini akan bekerja di setiap browser?
clip-path: polygon() dan mask-image keduanya didukung secara luas di Chrome, Firefox, Safari, dan Edge saat ini. CSS yang dihasilkan selalu mencakup bentuk yang diawali -webkit- dari properti apa pun yang digunakan, karena Safari secara historis membutuhkannya untuk mask-image.
Mengapa scoop yang ukurannya persen lebih kecil dari yang saya harapkan?
Ukuran persen dibatasi pada 50 sehingga potongan dari sudut yang berlawanan tidak dapat saling tumpang tindih.
Saya hanya ingin sudut bulat sederhana, bukan pemotongan — apa yang harus saya gunakan?
Itu adalah border-radius, bukan potongan — gunakan Generator Border Radius sebagai gantinya. Jika Anda membulatkan sudut gambar aktual yang telah Anda unggah (bukan menghasilkan CSS untuk kotak langsung), gunakan Round Corners.
Privasi
Semuanya terjadi di browser Anda. Gaya dan ukuran pilihan Anda tidak pernah dikirim ke server — CSS dan pratinjau dihasilkan dan diperbarui secara lokal saat Anda menyesuaikan kontrol.