パーツ番号 09-04-08 ・ CSSのみ

リボン型ラベル

カードの角に斜めに掛かるリボン型ラベルの静止見本です。商品カードやおすすめ記事に重ねて新着・注目情報を知らせるのに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-04-08-card">
          <span class="d09-04-08-ribbon">NEW</span>
          <p class="d09-04-08-text">サンプルカード</p>
        </div>

CSS

.d09-04-08-card{position:relative;width:150px;height:110px;background:#f1f5f9;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
        .d09-04-08-ribbon{position:absolute;top:14px;left:-32px;width:130px;transform:rotate(-45deg);background:#ef4444;color:#fff;font-size:11px;font-weight:700;text-align:center;padding:4px 0;box-shadow:0 1px 3px rgba(0,0,0,.2)}
        .d09-04-08-text{margin:0;font-size:13px;color:#64748b}

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