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

対角線状に並ぶタイル配置

左上から右下へ規則的にずらしたタイル配置の見本です。WordPressのプロセス紹介やステップ説明のセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-05-wrap">
          <span class="d01-14-05-t d01-14-05-t1">1</span>
          <span class="d01-14-05-t d01-14-05-t2">2</span>
          <span class="d01-14-05-t d01-14-05-t3">3</span>
          <span class="d01-14-05-t d01-14-05-t4">4</span>
        </div>

CSS

.prev.d01-14-05{padding:14px}
        .d01-14-05-wrap{position:relative;width:100%;max-width:280px;height:210px}
        .d01-14-05-t{position:absolute;width:56px;height:56px;border-radius:10px;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
        .d01-14-05-t1{top:0;left:0;background:linear-gradient(135deg,#6366f1,#818cf8)}
        .d01-14-05-t2{top:52px;left:56px;background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
        .d01-14-05-t3{top:104px;left:112px;background:linear-gradient(135deg,#10b981,#34d399)}
        .d01-14-05-t4{top:154px;left:168px;background:linear-gradient(135deg,#f59e0b,#fbbf24)}

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