パーツ番号 11-16-09 ・ CSSのみ

スクエア角ばりタグチップ

角丸を排したシャープな四角形のタグチップです。セール表示やブランド系ECサイトのキャッチコピー的なタグ演出に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-09-field">
          <span class="d11-16-09-chip">SALE</span>
          <span class="d11-16-09-chip">NEW</span>
          <span class="d11-16-09-chip">LIMITED</span>
        </div>

CSS

.d11-16-09-field{width:100%;max-width:280px;display:flex;flex-wrap:wrap;gap:8px;font-family:sans-serif}
        .d11-16-09-chip{padding:7px 14px;border:2px solid #111827;border-radius:0;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:#111827;background:#fff}

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