パーツ番号 02-07-40 ・ CSSのみ

スタンプ風見出しラベル

破線の円を少し傾けたスタンプ風の見出しラベル。認定・保証マークのような信頼感を出したい案内見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="stamp">
            <span class="stamp-inner">OFFICIAL</span>
          </span>
        </div>

CSS

.d02-07-40 .wrap{ display:flex; justify-content:center; padding:16px; }
        .d02-07-40 .stamp{ display:inline-flex; align-items:center; justify-content:center; width:110px; height:110px; border-radius:50%; border:3px dashed #dc2626; transform:rotate(-8deg); }
        .d02-07-40 .stamp-inner{ font-size:14px; font-weight:800; letter-spacing:.08em; color:#dc2626; text-align:center; line-height:1.4; }

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