Pembuat Pita Sudut CSS
Buat banner pita sudut yang terlipat — label diagonal 'Diskon!/'Baru'/'Unggulan' yang menghiasi sudut kartu produk, dengan bayangan tepi yang terlipat opsional — sebagai CSS siap tempel, dengan pratinjau langsung.
Input
Label yang ditampilkan pada banner pita.
Sudut mana kartu pita ini menghiasi.
Menskala seluruh pita — lebar band, ukuran font, dan offset semuanya mengikuti.
Menambahkan pasangan segitiga ::before/::after yang lebih gelap tempat pita terlipat ke bawah.
Output
Pita Anda akan muncul di sini.
Pita yang sepenuhnya bergaya inline yang identik dengan pratinjau di atas (segitiga bayangan tepi sebagai <div> biasa, bukan ::before/::after) — tempel di mana saja.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-ribbon-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"ribbonText": "Sale!",
"corner": "top-right",
"ribbonColor": "#e63946",
"textColor": "#ffffff",
"ribbonSize": "140",
"foldShadow": "true"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-ribbon-generator` tool (CSS Ribbon 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-ribbon-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Pita Sudut 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
Pita sudut adalah label diagonal "Diskon!" atau "Baru" yang menghiasi sudut kartu produk, gambar, atau ubin harga. Terlihat seperti sepotong kertas yang dilipat di sekitar tepi kotak — lipatan itulah bagian yang sulit dilakukan dengan CSS biasa. Pembuat ini menulis semuanya untuk Anda: pilih sudut, warna dan ukuran, lalu salin aturan yang sudah jadi.
Cara menggunakannya
- Ketikkan teks pita — label pendek ("Diskon!", "Baru", "-20%") terlihat paling baik.
- Pilih sudut tempat pita menghiasi.
- Atur warna pita dan warna teks.
- Seret ukuran pita sampai band terlihat tepat di pratinjau — semua hal lainnya (ukuran font, tinggi baris, offset) berskala sesuai dengannya.
- Aktifkan/nonaktifkan bayangan tepi terlipat untuk segitiga gelap kecil yang membuat pita terlihat seperti kertas yang terlipat daripada kotak putar datar.
- Salin CSS dan cuplikan HTML
<div class="ribbon"><span>…</span></div>, atau salin/unduh HTML bergaya inline pratinjau jika Anda menginginkan sesuatu yang tidak bergantung pada stylesheet terpisah.
Cara kerjanya
Pita terdiri dari dua elemen: pembungkus kuadrat kecil .ribbon yang dipasang ke sudut dengan overflow: hidden, dan .ribbon span yang lebih lebar diputar 45° di dalamnya. Hanya irisan diagonal span yang berada di dalam jendela pangkas pembungkus yang terlihat, itulah yang memberikan band penampilannya yang indah dengan sudut persegi daripada meluap kartu. Bayangan tepi terlipat menambahkan pasangan ::before/::after pada span — dua segitiga kecil, berwarna nada lebih gelap dari warna pita, diposisikan tepat di luar tepi span itu sendiri — yang diputar bersama semua hal lainnya dan terlihat seperti kertas terlipat di mana band keluar dari kotak yang terlihat.
Privasi
Semuanya berjalan di browser Anda — CSS dan HTML dihasilkan secara lokal, tidak ada yang diunggah, dan alat ini bekerja offline setelah halaman dimuat.
Mengapa ada dua cuplikan HTML?
Bidang HTML adalah markup nyata, yang dimaksudkan untuk berpasangan dengan blok CSS melalui pemilih kelas .ribbon/.ribbon span — itulah yang Anda tempel ke proyek Anda. Cuplikan pratinjau adalah salinan terpisah yang sepenuhnya bergaya inline dari pita yang sama (segitiga bayangan tepi disertakan sebagai <div> biasa, bukan ::before/::after) yang cocok persis dengan apa yang Anda lihat di atas — berguna jika Anda ingin menjatuhkannya ke suatu tempat tanpa mengirimkan stylesheet terpisah, tetapi versi berbasis kelas adalah yang harus digunakan di halaman nyata.
Bagaimana jika saya membutuhkan bentuk berbeda, bukan pita?
Untuk segitiga biasa (panah, penunjuk tooltip), gunakan Pembuat Segitiga CSS. Untuk bentuk dengan lebih banyak poin — bintang, segi enam, garis besar gelembung ucapan — Pembuat Clip-Path CSS membuat poligon arbitrer sebagai gantinya. Untuk meletakkan bayangan jatuh di bawah kartu tempat pita berada, lihat Pembuat Bayangan Kotak CSS.