パーツ番号 09-05-04 ・ CSSのみ

受賞歴バッジ

装飾リボン付きの円形エンブレムで受賞実績を表現。サービス比較サイトでの評価やアワード受賞をアピールするのに適する。

css

プレビュー

ソースコード

HTML

<div class="d09-05-04-badge">
          <svg class="d09-05-04-ribbon" viewBox="0 0 100 40" width="70" height="28">
            <path d="M20 0 L35 0 L28 40 Z" fill="#c9762f"/>
            <path d="M80 0 L65 0 L72 40 Z" fill="#c9762f"/>
          </svg>
          <div class="d09-05-04-circle">
            <span class="d09-05-04-year">2025</span>
            <span class="d09-05-04-title">AWARD</span>
          </div>
        </div>

CSS

.d09-05-04-badge{ position:relative; display:flex; flex-direction:column; align-items:center; }
        .d09-05-04-ribbon{ position:absolute; top:34px; left:50%; transform:translateX(-50%); z-index:1; }
        .d09-05-04-circle{
          position:relative; z-index:2; width:88px; height:88px; border-radius:50%;
          background:radial-gradient(circle at 35% 30%, #f3d089, #caa04a 70%, #a97e30);
          border:3px solid #8a6423;
          display:flex; flex-direction:column; align-items:center; justify-content:center;
          box-shadow:0 4px 10px rgba(120,80,20,0.35);
        }
        .d09-05-04-year{ font-size:11px; color:#5a3f14; font-weight:700; }
        .d09-05-04-title{ font-size:14px; color:#4a2f0e; font-weight:800; letter-spacing:.05em; }

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