CSS スターバースト/セールバッジジェネレーター — トゲのあるサンバースト型
多くのスパイクを持つスターバースト/サンバースト clip-path シェイプ — 古典的な「セール・シール」ステッカーの外観 — をスパイク数、内側/外側半径比、および回転から生成します。中央にテキストラベルとライブプレビュー付き。
入力
バッジの周りに放射状に広がるポイント数 — 6 で穏やかなサンバースト、32 で密度の濃いスターバースト。
外側半径の割合としての内側半径 — 低い値はより長く鋭いスパイクを生成、高い値は短くて丸いスパイクを生成します。
バッジ全体を回転させます — スパイクの先端を正確に希望の位置に配置するのに便利です。
プレビューとHTMLスニペットの両方でバッジの上部中央に表示されます。
出力
スターバーストバッジがここに表示されます。
これをスタイルシートに追加し、class="starburst-badge" (ネストされた "starburst-badge__label" スパンを持つ) をマークアップに適用します。
上記のプレビューと一致するインラインスタイル付きマークアップ — どこでも貼り付けられます、スタイルシートは不要です。
このツールを使う他の方法
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"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-starburst-generator` tool (CSS Starburst / Sale-Badge Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-starburst-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="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>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
スターバーストバッジとは？
スターバーストバッジ (またはサンバーストバッジ) は、「50% OFF!」「NEW!」「SALE!」の価格タグに使用されるトゲのあるステッカーシェイプです。中央から放射状に広がる多数のポイントを持つ星で、通常は中央に短いテキスト行が置かれています。CSS の clip-path: polygon(...) 値を使用して完全に構築されています。これは円形の周りの長い外側のポイントと短い内側のノッチを交互にする、x% y% の頂点座標のリストです。
このツールは、手で編集する必要がある固定シェイプではなく、3 つの単純なコントロール (スパイク数、スパイク鋭さ、回転) からこの頂点リストを計算します。チャンキーなレトロシールのために 8 つのスパイク、または微細なサンバースト光線効果のために 24 を選択してから、ラベルをその上に配置し、準備ができた CSS をコピーしてください。
このツールの使い方
- スパイク数を設定します。バッジの周りに放射状に広がるポイント数。穏やかな 6 ポイントのサンバーストから密度の濃い 32 ポイントのスターバーストまで。
- スパイク鋭さ (内側半径 %) を設定します。これは外側半径の割合としての内側ノッチの半径です。低い値 (10% に近い) はより長く鋭いスパイクを生成します。高い値 (90% に近い) は短く丸いスパイクを保ちます。
- 特定のスパイク先端を真上 (12 時) 以外のどこかに向けたい場合は、回転を調整します。
- バッジサイズ、バッジ塗りつぶし色、および独自のフォントサイズと色を持つラベルテキストを選択します。
- CSS (
.starburst-badgeクラスと.starburst-badge__labelスパン) をスタイルシートにコピーするか、その下の HTML スニペットを取得してください。スタイルシートに触れることなく、どこにでも貼り付けられる自己完結型のインラインスタイル版です。
シェイプの構築方法
ポリゴンには 2 × スパイク数 の頂点があります。偶数インデックスの頂点は外側半径上に位置し (スパイク先端、バッジボックスの端)、奇数インデックスの頂点は内側半径上に位置し (スパイク間のノッチ)。円の周りを均等に移動し、2 つの半径を交互に使用することで、古典的なスター/サンバースト シルエットが生成されます。これは 5 ポイント星が使用するのと同じ構築方法で、任意のスパイク数に一般化されています。
FAQ
テキストがスパイク先端に接しないのはなぜですか？
ラベルはバッジの完全な (クリップ前の) ボックス内でフレックスボックスを使用して中央に配置され、任意のスパイク数でスパイク間のノッチから離れた状態を保つために最大幅 60% に制限されています。clip-path は見えるものをクリップしますが、その下のレイアウトボックスは変更しません。そのため、中央配置はクリップされていない長方形と全く同じように機能します。
セールバッジ以外に使用できますか？ はい — スターバースト clip-path はシェイプに過ぎません。単色の背景の代わりに背景画像を配置することも、ラベルを完全にスキップしてデコレーティブアクセント、「フィーチャー」リボンの置き換え、またはコミックスタイルの「BOOM!」コールアウトシェイプとして使用することもできます。
三角形、六角形、または古典的な 10 ポイント星プリセットなど、手続きスターバーストではなく特定の固定シェイプが必要な場合はどうしますか？ CSS Clip-Path Generator を使用してください。これは円、楕円、インセット、および一般的なポリゴンプリセットのライブラリ (固定星を含む) をカバーしており、手で編集可能なカスタムポイントリストもあります。
プライバシー
すべてはあなたのブラウザで行われます。スパイク数、色、ラベルテキストがサーバーに送信されることはありません — CSS とプレビューはコントロールを調整するときにローカルで更新されます。