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

ロック中(未達成)バッジのシルエット表示

未達成のバッジをシルエットと鍵アイコンで表した静止見本です。今後解放される実績や隠しコンテンツの予告表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-10-wrap">
          <div class="d09-15-10-badge">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>
          </div>
          <div class="d09-15-10-badge">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>
          </div>
          <div class="d09-15-10-badge">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>
          </div>
        </div>

CSS

.d09-15-10-wrap{display:flex;gap:14px;justify-content:center}
        .d09-15-10-badge{width:54px;height:54px;border-radius:50%;background:#f1f5f9;border:2px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;box-sizing:border-box}

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