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

パズルピース風非対称ボックス

各ボックスの内側の角だけを丸めてはめ込み型の継ぎ目を表現した区画見本です。WordPressのチーム紹介やサービス連携図の背景装飾に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-03-grid">
          <div class="d01-14-03-p d01-14-03-p1">A</div>
          <div class="d01-14-03-p d01-14-03-p2">B</div>
          <div class="d01-14-03-p d01-14-03-p3">C</div>
          <div class="d01-14-03-p d01-14-03-p4">D</div>
        </div>

CSS

.prev.d01-14-03{padding:14px}
        .d01-14-03-grid{width:100%;max-width:260px;height:220px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px}
        .d01-14-03-p{display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
        .d01-14-03-p1{border-radius:0 36px 0 0;background:linear-gradient(135deg,#6366f1,#818cf8)}
        .d01-14-03-p2{border-radius:36px 0 0 0;background:linear-gradient(135deg,#f59e0b,#fbbf24)}
        .d01-14-03-p3{border-radius:0 0 0 36px;background:linear-gradient(135deg,#10b981,#34d399)}
        .d01-14-03-p4{border-radius:0 0 36px 0;background:linear-gradient(135deg,#ef4444,#f87171)}

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