パーツ番号 02-07-12 ・ CSSのみ

リボンバナー見出しラベル

左右が三角に切れ込んだリボン風のラベルを見出し上部に配置。ランキングや期間限定企画のセクション導入に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="ribbon">RANKING</span>
          <h4 class="ttl">人気商品ランキング</h4>
        </div>

CSS

.d02-07-12 .wrap{ text-align:center; }
        .d02-07-12 .ribbon{ position:relative; display:inline-block; padding:6px 22px; background:#dc2626; color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; margin-bottom:14px; }
        .d02-07-12 .ribbon::before,.d02-07-12 .ribbon::after{ content:""; position:absolute; top:0; border-top:16px solid #a91d1d; }
        .d02-07-12 .ribbon::before{ left:-10px; border-left:10px solid transparent; }
        .d02-07-12 .ribbon::after{ right:-10px; border-right:10px solid transparent; }
        .d02-07-12 .ttl{ all:unset; display:block; font-size:20px; font-weight:800; color:#1f2937; }

クラス名 .d02-07-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。