パーツ番号 02-14-11 ・ CSSのみ

コーナーリボン風バッジキャプション

画像の左上に斜めのリボンバッジを重ねた装飾キャプション。ECサイトのセール商品画像やキャンペーンバナーに目印として使える。

staticcss

プレビュー

ソースコード

HTML

<div class="photo">
          <span class="ribbon">SALE</span>
          <span class="ph-txt">Photo</span>
        </div>
        <p class="cap">期間限定セール対象商品のイメージ画像</p>

CSS

.d02-14-11{ display:flex; flex-direction:column; gap:8px; }
        .d02-14-11 .photo{ position:relative; height:160px; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,#fecaca,#f87171); display:flex; align-items:center; justify-content:center; }
        .d02-14-11 .ph-txt{ font-size:13px; color:#7f1d1d; font-weight:600; }
        .d02-14-11 .ribbon{ position:absolute; top:14px; left:-34px; width:130px; padding:4px 0; background:#dc2626; color:#fff; font-size:10px; font-weight:800; letter-spacing:.05em; text-align:center; transform:rotate(-45deg); box-shadow:0 2px 4px rgba(0,0,0,.2); }
        .d02-14-11 .cap{ all:unset; display:block; font-size:12px; color:#6b7280; padding:0 2px; }

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