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

プライスタグ型見出し

値札を模した五角形の穴あきタグ形状で見出しを包むスタイル。新着商品や限定アイテムの紹介見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="tag">
            <span class="hole"></span>
            NEW ARRIVAL
          </span>
        </div>

CSS

.d02-07-37 .wrap{ display:flex; justify-content:center; padding:20px; }
        .d02-07-37 .tag{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:10px 22px 10px 36px; background:#0f766e; color:#fff; font-size:14px; font-weight:800; letter-spacing:.05em; clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%); }
        .d02-07-37 .hole{ position:absolute; left:20px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:#fff; }

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