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

ジグザグ三角下線見出し

見出し下に三角形が連続するジグザグ模様の帯を敷いたスタイル。カジュアルなショップサイトやイベント告知の見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">ジグザグ見出し</h4>
        </div>

CSS

.d02-10-16 .wrap{ text-align:center; }
        .d02-10-16 .ttl{ all:unset; display:inline-block; font-size:22px; font-weight:800; color:#1f2937; }
        .d02-10-16 .ttl::after{ content:""; display:block; margin-top:10px; height:8px; background-image:linear-gradient(135deg,#ec4899 25%,transparent 25%),linear-gradient(225deg,#ec4899 25%,transparent 25%); background-position:0 0; background-size:10px 10px; background-repeat:repeat-x; }

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