パーツ番号 02-10-08 ・ CSSのみ

斜めストライプ背景見出し

斜めストライプ模様の背景の上に白抜きの見出しラベルを重ねるスタイル。セール情報や限定コンテンツの見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">SPECIAL</h4>
        </div>

CSS

.d02-10-08 .wrap{ padding:24px; text-align:center; border-radius:6px; background-image:repeating-linear-gradient(45deg, #f3f4f6 0 10px, #e5e7eb 10px 20px); }
        .d02-10-08 .ttl{ all:unset; display:inline-block; padding:8px 20px; background:#fff; font-size:20px; font-weight:800; color:#111827; border-radius:4px; letter-spacing:0.05em; }

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