パーツ番号 10-01-04 ・ CSSのみ

価格・割引タグ

二重線で消した旧価格に割引率バッジと新価格を並べ、角にSALEリボンを配置。WooCommerceのセール価格表示をわかりやすく訴求できます。

eccss

プレビュー

ソースコード

HTML

<div class="d10-01-04-card">
          <div class="d10-01-04-ribbon">SALE</div>
          <div class="d10-01-04-thumb">👟</div>
          <div class="d10-01-04-body">
            <p class="d10-01-04-name">ランニングシューズ</p>
            <div class="d10-01-04-prices">
              <span class="d10-01-04-old">¥9,800</span>
              <span class="d10-01-04-new">¥6,860</span>
              <span class="d10-01-04-off">-30%</span>
            </div>
          </div>
        </div>

CSS

.d10-01-04{background:#f6f7fb}
        .d10-01-04-card{position:relative;width:210px;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(30,40,80,.1);overflow:hidden}
        .d10-01-04-ribbon{position:absolute;top:14px;left:-34px;transform:rotate(-45deg);background:#ef4444;color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;padding:5px 40px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
        .d10-01-04-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:52px;background:linear-gradient(135deg,#fecaca,#fed7aa)}
        .d10-01-04-body{padding:14px}
        .d10-01-04-name{margin:0 0 8px;font-size:14px;font-weight:600;color:#1e293b}
        .d10-01-04-prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
        .d10-01-04-old{font-size:13px;color:#94a3b8;text-decoration:line-through;text-decoration-color:#ef4444}
        .d10-01-04-new{font-size:20px;font-weight:800;color:#ef4444}
        .d10-01-04-off{font-size:11px;font-weight:700;color:#fff;background:#ef4444;border-radius:5px;padding:2px 7px}

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