Generator Starburst / Lencana Penjualan CSS — Bentuk Sunburst Berserat
Buat bentuk clip-path starburst/sunburst dengan banyak paku — tampilan stiker penyegel penjualan klasik — dari jumlah paku, rasio jari-jari dalam/luar dan rotasi, dengan label teks terpusat dan pratinjau langsung.
Input
Berapa banyak poin yang memancar di sekitar lencana — sunburst lembut di 6, starburst padat di 32.
Jari-jari dalam sebagai persen dari jari-jari luar — nilai lebih rendah menghasilkan paku yang lebih panjang dan tajam; nilai lebih tinggi menghasilkan paku yang pendek dan tumpul.
Memutar seluruh lencana — berguna untuk menyelaraskan ujung paku tepat di tempat yang Anda inginkan.
Ditampilkan di tengah lencana di pratinjau dan cuplikan HTML.
Output
Lencana starburst Anda akan muncul di sini.
Tambahkan ini ke stylesheet Anda, lalu terapkan class="starburst-badge" (dengan span "starburst-badge__label" bersarang) ke markup Anda.
Markup dengan gaya inline yang cocok dengan pratinjau di atas — tempel di mana saja, tidak perlu stylesheet.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-starburst-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"spikeCount": "12",
"innerRadiusRatio": "45",
"rotation": "0",
"badgeSize": "220",
"badgeColor": "#ef4444",
"labelText": "50% OFF",
"labelFontSize": "28",
"labelTextColor": "#ffffff"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-starburst-generator` tool (CSS Starburst / Sale-Badge 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-starburst-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator Starburst / Lencana Penjualan CSS — Bentuk Sunburst Berserat — 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 lencana starburst?
Lencana starburst (atau sunburst) adalah bentuk stiker berserat yang digunakan pada tag harga "50% OFF!", "NEW!" dan "SALE!" — bintang berujung banyak yang memancar dari pusat, biasanya dengan sebaris teks pendek di tengahnya. Semuanya dibangun dalam CSS dengan nilai clip-path: polygon(...): daftar koordinat verteks x% y% yang bergantian antara titik luar panjang dan takik dalam pendek di sekitar seluruh lingkaran.
Alat ini menghitung daftar verteks itu untuk Anda dari tiga kontrol sederhana — jumlah paku, ketajaman paku dan rotasi — bukan bentuk tetap yang harus Anda edit tangan. Pilih 8 paku untuk penyegel retro chunky atau 24 untuk efek sinar sunburst yang halus, lalu letakkan label di atasnya dan salin CSS yang sudah siap.
Cara menggunakan alat ini
- Atur Jumlah Paku — berapa banyak poin yang memancar di sekitar lencana, dari sunburst 6 poin lembut hingga starburst 32 poin padat.
- Atur Ketajaman Paku (Persen Jari-jari Dalam) — ini adalah jari-jari takik dalam sebagai persen dari jari-jari luar. Nilai lebih rendah (lebih dekat ke 10%) menarik takik dengan erat untuk paku panjang yang tajam; nilai lebih tinggi (lebih dekat ke 90%) menjaganya pendek dan tumpul.
- Sesuaikan Rotasi jika Anda menginginkan ujung paku tertentu menunjuk ke tempat lain selain lurus ke atas (jam 12).
- Pilih Ukuran Lencana, Warna Pengisi Lencana, dan Teks Label Anda dengan ukuran font dan warna sendiri.
- Salin CSS (kelas
.starburst-badgeditambah span.starburst-badge__label) ke stylesheet Anda, atau ambil cuplikan HTML di bawahnya — versi dengan gaya inline mandiri yang dapat Anda tempel di mana saja tanpa menyentuh stylesheet sama sekali.
Bagaimana bentuk dibangun
Polygon memiliki 2 × jumlah paku verteks. Verteks dengan indeks genap duduk di jari-jari luar (ujung paku, di tepi kotak lencana); verteks dengan indeks ganjil duduk di jari-jari dalam (takik di antara paku). Berjalan merata di sekitar lingkaran dan bergantian antara dua jari-jari adalah apa yang menghasilkan siluet bintang/sunburst klasik — konstruksi yang sama yang digunakan bintang 5 poin, digeneralisir ke jumlah paku apa pun.
FAQ
Mengapa teks tidak menyentuh ujung paku?
Label berpusat dengan flexbox di dalam kotak penuh lencana (sebelum di-clip), dan dibatasi pada lebar maksimum 60% sehingga tetap jelas dari takik di antara paku pada jumlah paku apa pun — clip-path memotong apa yang terlihat tetapi tidak mengubah kotak tata letak di bawahnya, sehingga pemusatan tetap bekerja persis seperti pada persegi panjang yang tidak dipotong.
Dapatkah saya menggunakan ini untuk sesuatu selain lencana penjualan? Ya — clip-path starburst hanya sebuah bentuk. Letakkan gambar latar belakang di belakangnya daripada warna datar, atau lewati label sepenuhnya dan gunakan sebagai aksen dekoratif, pengganti pita "featured", atau bentuk callout gaya komik "BOOM!".
Bagaimana jika saya membutuhkan bentuk tetap tertentu bukan starburst prosedural — segitiga, hexagon, atau preset bintang 10 poin klasik? Gunakan CSS Clip-Path Generator, yang mencakup lingkaran, elips, inset dan perpustakaan preset poligon umum (termasuk bintang tetap), ditambah daftar poin kustom yang dapat diedit tangan.
Privasi
Semuanya terjadi di browser Anda. Jumlah paku, warna, dan teks label Anda tidak akan pernah dikirim ke server — CSS dan pratinjau diperbarui secara lokal saat Anda menyesuaikan kontrol.