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

空のカート・買い物リストイラスト

空の箱をCSS図形で表現し、ショッピングカートが空であることを伝える静止イラスト。ECサイトのカートページに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-08-02-wrap">
          <div class="d09-08-02-box">
            <div class="d09-08-02-lid"></div>
            <div class="d09-08-02-body">
              <span class="d09-08-02-x">×</span>
            </div>
          </div>
          <p class="d09-08-02-text">商品がありません</p>
          <p class="d09-08-02-sub">カートに商品を追加してください</p>
        </div>

CSS

.d09-08-02-wrap{ text-align:center; }
        .d09-08-02-box{ width:76px; height:56px; margin:0 auto 14px; position:relative; }
        .d09-08-02-lid{ position:absolute; top:0; left:-6px; right:-6px; height:12px; background:#d7dbe3; border-radius:3px; }
        .d09-08-02-body{ position:absolute; top:12px; left:4px; right:4px; bottom:0; background:#eef0f4; border:2px solid #d7dbe3; border-top:none; border-radius:0 0 6px 6px; display:flex; align-items:center; justify-content:center; }
        .d09-08-02-x{ font-size:20px; color:#c7ccd6; font-weight:700; }
        .d09-08-02-text{ margin:0; font-size:14px; font-weight:700; color:#3a3f4b; }
        .d09-08-02-sub{ margin:6px 0 0; font-size:12px; color:#9aa0ac; }

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