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

斜めにずれて積み重なるボックス

カードを軽く回転させながら斜めに積んだ静止スタック表現です。WordPressの実績カードやレビュー一覧の見出し装飾に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-10-wrap">
          <span class="d01-14-10-card d01-14-10-c1">March</span>
          <span class="d01-14-10-card d01-14-10-c2">April</span>
          <span class="d01-14-10-card d01-14-10-c3">May</span>
        </div>

CSS

.prev.d01-14-10{padding:14px}
        .d01-14-10-wrap{position:relative;width:100%;max-width:260px;height:220px}
        .d01-14-10-card{position:absolute;width:160px;height:100px;border-radius:12px;box-shadow:0 6px 16px rgba(15,23,42,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
        .d01-14-10-c1{top:20px;left:20px;background:linear-gradient(135deg,#64748b,#94a3b8);transform:rotate(-8deg);z-index:1}
        .d01-14-10-c2{top:52px;left:50px;background:linear-gradient(135deg,#0ea5e9,#38bdf8);transform:rotate(4deg);z-index:2}
        .d01-14-10-c3{top:84px;left:80px;background:linear-gradient(135deg,#f97316,#fb923c);transform:rotate(-3deg);z-index:3}

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