CSS見出しデザイン素材

線は border-image で描いているので、見出しタグ1つで使えます。右に向かって薄く消えていきます。

文字が長くて2行になると、線は文字の高さの中央に来ます。線の間隔は gap で変えられます。

英字は data-en="…" に書きます。見出しタグ1つのままで、読み上げにも邪魔になりにくい作りです。

番号は data-num="01" に書きます。中抜き(縁取りだけ)の数字です。塗りつぶしたいときは color を指定してください。

帯だけを傾けているので、文字はまっすぐのままです。傾きは --cs-skew で変えられます。

しっぽの位置は ::after の left で変えられます。

マーカーは文字の下半分だけに引いています。62% を小さくすると太いマーカーになります。2行になっても行ごとに引かれます。

点線は outline を内側に入れて描いています。outline-offset で縫い目の位置を変えられます。

左上と右下にL字の線を置いています。角の大きさは --cs-size で変えられます。

丸とチェックは疑似要素で描いているので、画像は要りません。

背景の英字は data-en="…" に書きます。長い英字ははみ出した分が切れるので、1語くらいがきれいです。