CSS Advent Calendar 2024 にCSSの三角関数を使って斜線を引くというネタからのインスピレーションを受けて、最終日が空いていたので、CSSというかSVGでボックスに斜線を引く芸を紹介します。
基本的な仕組みはボックスのbackground-imageに以下のような斜線を描いたSVGを指定するという単純なものです。
diagonal-line.svg
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1 1"
preserveAspectRatio="none"
>
<path
d="M0,0L1,1"
vector-effect="non-scaling-stroke"
stroke="black"
/>
</svg>
この程度のシンプルなSVGならCSSに埋め込んでも問題ないでしょう
.diagonal-line {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0,0L1,1" vector-effect="non-scaling-stroke" stroke="black"/></svg>');
}
ポイントは
preserveAspectRatio="none"
vector-effect="non-scaling-stroke"
の2つの属性です。
preserveAspectRatio="none"
この属性はSVGを表示するとき縦横比の保持をさせない、つまり、元の縦横比を無視してサイズに応じて表示されるようになります。
この属性によってボックスのサイズいっぱいに斜線を表示してくれるようになります。
preserveAspectRatio="none"の有無のデモ
vector-effect="non-scaling-stroke"
この属性はオブジェクトのstrokeの幅をサイズに応じたスケーリングをさせないというものです。
この属性によってSVGデータの元サイズより縮小・拡大しようとstrokeの幅が一定に保たれます。
vector-effect="non-scaling-stroke"の有無のデモ
まとめ
以上がSVGを使って斜線を描く基本です。あとは stroke, stroke-width, stroke-opacity, stroke-dasyarray等を使って各々お好きな斜線を描いて素敵なクリスマスにしてください！メリクリ！