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

ミシン目チケット見出し

チケットの切り取り線を模したドット罫線とハサミアイコンを添えた見出し。招待券や引換券デザインのタイトルに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="ticket">
          <h4 class="ttl">ご招待券</h4>
          <span class="scissors">&#9986;</span>
        </div>

CSS

.d02-07-42 .ticket{ position:relative; padding:18px 24px 26px; text-align:center; border:1px solid #e5e7eb; border-radius:4px; }
        .d02-07-42 .ttl{ all:unset; display:block; font-size:20px; font-weight:800; color:#1f2937; padding-bottom:14px; border-bottom:3px dotted #cbd5e1; }
        .d02-07-42 .scissors{ position:absolute; left:-4px; bottom:6px; font-size:13px; color:#9ca3af; transform:rotate(90deg); }

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