HOME > CSS > CSSで背景に方眼を描く

CSSで背景に方眼を描く

紙媒体だとよく使う方眼背景をCSSで実装。linear-gradientを使う場合とrepeating-linear-gradient()を使う場合を考える。

どちらも縦ストライプと横ストライプをbackground-imageに指定するのは同じ。

「linear-gradient」で方眼サイズを描いてみる

方眼サイズが32px四方、線は1pxの方眼を描くなら、
縦ストライプ:linear-gradient(90deg, transparent 31px, #333 32px)
横ストライプ:linear-gradient(0deg, transparent 31px, #333 32px)

これらを,(カンマ)区切りでbackground-imageに指定し、

background-sizeで方眼サイズを指定する。

.stripe-stripe{
background-size: 32px 32px ;
background-color: rgba(251, 215, 74, 1);
background-image: linear-gradient(90deg, transparent 31px, #333 32px), linear-gradient(0deg, transparent 31px, #333 32px);
}

サンプル1

「repeating-linear-gradient」で方眼サイズを描いてみる

.stripe-stripe2{
background-color: rgba(251, 215, 74, 1);
background-image: repeating-linear-gradient(90deg, transparent, transparent 31px, #333 31px, #333 32px), repeating-linear-gradient(0deg, transparent, transparent 31px, #333 31px, #333 32px);
}

サンプル2

両者の違いをどう考え、使い分けるか

考え中(というか時間切れ・・・)

参考サイト