パーツ番号 09-15-02 ・ CSSのみ

六角形スキルバッジコレクション

六角形を並べたハニカム状のスキルバッジ集合の静止見本です。会員プロフィールページで習得済みスキルや資格を一覧表示する際に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-02-grid">
          <div class="d09-15-02-hex d09-15-02-c1">HTML</div>
          <div class="d09-15-02-hex d09-15-02-c2">CSS</div>
          <div class="d09-15-02-hex d09-15-02-c3">JS</div>
          <div class="d09-15-02-hex d09-15-02-c4">PHP</div>
          <div class="d09-15-02-hex d09-15-02-c5">SEO</div>
          <div class="d09-15-02-hex d09-15-02-c6">UI</div>
        </div>

CSS

.d09-15-02-grid{display:grid;grid-template-columns:repeat(3,58px);gap:8px 10px;justify-content:center}
        .d09-15-02-hex{width:58px;height:64px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;text-align:center}
        .d09-15-02-c1{background:#e11d48}
        .d09-15-02-c2{background:#2563eb}
        .d09-15-02-c3{background:#d97706}
        .d09-15-02-c4{background:#7c3aed}
        .d09-15-02-c5{background:#16a34a}
        .d09-15-02-c6{background:#0891b2}

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