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

重なり合うレイヤードボックス

複数の矩形を少しずつずらして重ねた奥行きのある構図です。WordPressのサービス比較や工程の重なりを表現するセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-06-wrap">
          <span class="d01-14-06-box d01-14-06-b1">戦略</span>
          <span class="d01-14-06-box d01-14-06-b2">設計</span>
          <span class="d01-14-06-box d01-14-06-b3">運用</span>
        </div>

CSS

.prev.d01-14-06{padding:14px}
        .d01-14-06-wrap{position:relative;width:100%;max-width:280px;height:220px}
        .d01-14-06-box{position:absolute;border-radius:12px;box-shadow:0 8px 20px rgba(15,23,42,.15);display:flex;align-items:flex-end;padding:12px;color:#fff;font-size:12px;font-weight:700}
        .d01-14-06-b1{top:10px;left:10px;width:150px;height:110px;background:linear-gradient(135deg,#6366f1,#818cf8);z-index:1}
        .d01-14-06-b2{top:50px;left:70px;width:150px;height:110px;background:linear-gradient(135deg,#f59e0b,#fbbf24);z-index:2;opacity:.94}
        .d01-14-06-b3{top:90px;left:120px;width:130px;height:100px;background:linear-gradient(135deg,#10b981,#34d399);z-index:3;opacity:.94}

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