CSSリボンジェネレーター
折り畳まれたコーナーリボンバナーを生成します。対角の「セール!」/「新着」/「おすすめ」ラベルが製品カードの隅にかかり、オプションの折り畳み端の影があり、コピーして貼り付けられるCSSとしてライブプレビュー付きです。
入力
リボンバナーに表示されるラベル。
リボンがかかるカードのどのコーナー。
リボン全体をスケーリングします。バンド幅、フォントサイズ、オフセットはすべて一緒にスケーリングされます。
リボンが下に折れ込む場所に、より暗い::before/::afterの三角形ペアを追加します。
出力
リボンがここに表示されます。
上のプレビューと同じインラインスタイル版（折り畳み端の三角形は<div>として、::before/::afterではなく）—どこにでも貼り付けられます。
このツールを使う他の方法
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"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-ribbon-generator` tool (CSS Ribbon Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-ribbon-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クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
コーナーリボンは、製品カード、画像、または価格タイルのコーナーにかかる対角の「セール!」または「新着」ラベルです。ボックスの端に巻き付いた紙のように見えます。その折り畳みが通常のCSSで正しく機能させるのが難しい部分です。このジェネレーターはすべてを書き出してくれます。コーナー、色、サイズを選び、完成したルールをコピーしてください。
使い方
- リボンテキストを入力します。短いラベル（「セール!」、「新着」、「-20%」）が最良に見えます。
- リボンがかかるコーナーを選択します。
- リボンの色とテキストの色を設定します。
- リボンサイズをドラッグして、プレビューで帯が正しく見えるまで調整します。それ以外のすべて（フォントサイズ、行の高さ、オフセット）はそれに合わせてスケーリングされます。
- 折り畳み端の影をオンにして、リボンが平らに回転したボックスではなく、折り畳まれた紙のように見える暗い小さな三角形を追加します。
- CSSと
<div class="ribbon"><span>…</span></div>HTMLスニペットをコピーするか、別のスタイルシートに依存しないものが必要な場合はプレビューのインラインスタイルHTMLをコピー/ダウンロードしてください。
仕組み
リボンは2つの要素で構成されています。overflow: hiddenでコーナーに固定された小さな正方形の.ribbonラッパーと、その内側で45°回転した幅広い.ribbon spanです。ラッパーのクリップウィンドウ内に落ちるspanの対角スライスのみが表示されます。これにより、バンドはカードからはみ出すのではなく、きれいな四角いコーナーの外観になります。折り畳み端の影は、span上の::before/::afterペアを追加します。リボンの色の暗いシェードで色付けされた2つの小さな三角形で、span自体の端のすぐ先に位置し、他のすべてと一緒に回転し、帯が表示される正方形を出ていく2つの場所で紙が折り畳まれているように見えます。
プライバシー
すべてはあなたのブラウザで実行されます。CSSとHTMLはローカルで生成され、何もアップロードされず、ページの読み込み後はツールはオフラインで動作します。
なぜ2つのHTMLスニペットがあるのですか?
HTMLフィールドは実際のマークアップで、.ribbon/.ribbon spanクラスセレクターを通じてCSSブロックと組み合わせることを目的としています。これがプロジェクトに貼り付けるものです。プレビュースニペットは、同じリボンの別個の完全にインラインスタイル版（折り畳み端の三角形は<div>として::before/::afterではなく含まれます）で、上に表示されているものと完全に一致します。個別のスタイルシートなしでどこかに配置したい場合に便利ですが、クラスベースのバージョンは実際のページで使用するものです。
異なる形状が必要な場合（リボンではなく）?
単純な三角形（矢印、ツールチップポインター）には、CSSトライアングルジェネレーターを使用してください。より多くのポイントを持つ形状（星、六角形、スピーチバブルの輪郭）については、CSSクリップパスジェネレーターが任意のポリゴンを作成します。リボンが置かれているカードの下にドロップシャドウを配置するには、CSSボックスシャドウジェネレーターを参照してください。