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

ハニカム型六角形タイルグリッド

六角形を互い違いに組み合わせたハニカム構造のタイル配置です。WordPressのサービス一覧やスキルアイコンの並びに、四角形とは違う有機的な印象を加えられます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-11-hive">
          <div class="d01-14-11-row">
            <span class="d01-14-11-hex" style="background:linear-gradient(135deg,#6366f1,#818cf8)">01</span>
            <span class="d01-14-11-hex" style="background:linear-gradient(135deg,#f59e0b,#fbbf24)">02</span>
            <span class="d01-14-11-hex" style="background:linear-gradient(135deg,#10b981,#34d399)">03</span>
          </div>
          <div class="d01-14-11-row d01-14-11-row-off">
            <span class="d01-14-11-hex" style="background:linear-gradient(135deg,#ec4899,#f472b6)">04</span>
            <span class="d01-14-11-hex" style="background:linear-gradient(135deg,#0ea5e9,#38bdf8)">05</span>
          </div>
        </div>

CSS

.prev.d01-14-11{padding:14px}
        .d01-14-11-hive{display:flex;flex-direction:column;align-items:center}
        .d01-14-11-row{display:flex;gap:6px;margin-top:-16px}
        .d01-14-11-row:first-child{margin-top:0}
        .d01-14-11-row-off{margin-left:38px}
        .d01-14-11-hex{width:64px;height:56px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}

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