CSSのコーナーリボンとバッジ（ribbon と badge）
スタイル、テキスト、角を選んでください。リボンは1つの要素だけで作られ、テキストの大きさに合わせて調整されます。
使い方カードの角に「ベストセラー」
利用できる言語: 
広告
CSSのコーナーリボンとバッジ（ribbon と badge）: 用途
角のリボンは、カードのほかの部分を変えずに、一番人気のプラン、新商品、セールを目立たせます。斜めのリボン、丸型バッジ、ラベル、折り返しリボンから選び、テキスト、角、色、サイズを決めてください。
コードには、サンプルのカードとリボンのCSSが付いています。リボンは1つの要素で作られ、斜めの場合ははみ出した部分をカードが overflow hidden で切り取ります。プレビューで結果がすぐに分かり、ページではスタイルごとの使いどころも説明しています。
使い方
- スタイルとテキストを選びます。
- 角、色、サイズを調整します。
- コードをコピーします。
使うタイミング
- 料金表のおすすめプラン。
- 新商品やセール中の商品。
- 写真の上の割引バッジ。
よくある質問
リボンは角でどうやって切り取られますか？
カードに overflow: hidden と position: relative を指定します。
スクリーンリーダーはリボンを読み上げますか？
読み上げます。テキストがHTMLの中にあるからです。バッジがカードにすでにある内容の繰り返しなら、リボンに aria-hidden="true" を付けて、二重に読み上げられないようにできます。
どのスタイルを使えばいいですか？
斜めのリボンは最も目を引き、おすすめプランに向いています。丸型バッジは商品写真の上の割引（「-20%」）に向き、ラベル型は最も控えめで、項目が多いリストに向いています。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。