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

盾型の認定バッジ

盾の形をCSSのクリップパスで表現し、中央にチェックマークを配置した認定バッジの静止見本です。公式パートナーや資格保有者の証明表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-06-wrap">
          <div class="d09-15-06-shield">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          </div>
          <p class="d09-15-06-label">認定パートナー</p>
        </div>

CSS

.d09-15-06-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d09-15-06-shield{width:76px;height:86px;background:linear-gradient(160deg,#3b82f6,#1e40af);clip-path:polygon(50% 0%,100% 18%,100% 55%,50% 100%,0% 55%,0% 18%);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(0,0,0,.2)}
        .d09-15-06-label{margin:0;font-size:12px;font-weight:700;color:#1e3a8a}

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