パーツ番号 09-01-02 ・ CSSのみ

NEW/SALEリボン各種

角掛けリボン・帯リボン・折り返しリボンなど4種を用意。商品カードやお知らせに重ねて、新着やセールを目立たせる装飾に使えます。

css

プレビュー

ソースコード

HTML

<div class="d09-01-02-wrap">
          <div class="d09-01-02-card"><span class="d09-01-02-corner">NEW</span></div>
          <div class="d09-01-02-card"><span class="d09-01-02-band">SALE</span></div>
          <div class="d09-01-02-card"><span class="d09-01-02-fold">HOT</span></div>
          <div class="d09-01-02-card"><span class="d09-01-02-ribbon">-30%</span></div>
        </div>

CSS

.d09-01-02-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
        .d09-01-02-card{position:relative;width:96px;height:78px;background:#eef2f7;border-radius:8px;overflow:hidden}
        .d09-01-02-corner{position:absolute;top:9px;left:-26px;transform:rotate(-45deg);background:#2563eb;color:#fff;font-size:11px;font-weight:700;padding:3px 30px}
        .d09-01-02-band{position:absolute;top:12px;left:0;right:0;background:#ef4444;color:#fff;font-size:12px;font-weight:700;text-align:center;padding:4px 0}
        .d09-01-02-fold{position:absolute;top:0;right:0;background:#f59e0b;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-bottom-left-radius:8px}
        .d09-01-02-ribbon{position:absolute;bottom:10px;left:-6px;background:#16a34a;color:#fff;font-size:12px;font-weight:700;padding:4px 12px}
        .d09-01-02-ribbon::before{content:"";position:absolute;left:0;bottom:-6px;border:3px solid transparent;border-top-color:#0f7a34;border-right-color:#0f7a34}

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