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

斜線ハッチング背景見出し

見出しの背景に薄いクロスハッチング模様を敷いたスタイル。セール告知やアウトレット案内の見出しに手仕事感を加えられる。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="box">
            <h4 class="ttl">限定セール</h4>
          </div>
        </div>

CSS

.d02-10-32 .wrap{ text-align:center; }
        .d02-10-32 .box{ display:inline-block; padding:18px 28px; background-color:#f8fafc; background-image:repeating-linear-gradient(45deg, #cbd5e1 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, #cbd5e1 0 1px, transparent 1px 8px); }
        .d02-10-32 .ttl{ all:unset; display:block; font-size:19px; font-weight:800; color:#1f2937; }

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