CSS でストライプを再現する

要素の背景などに使われるストライプのパターンをCSS の repeating-linear-gradient() 関数で再現する。

repeating-linear-gradient

CSS の repeating-linear-gradient() 関数は線形グラデーションの繰り返しを生成する。
background-image や background プロパティで使うことができる。

ストライプ

repeating-linear-gradient() を使ってストライプ柄を表現する。

background: repeating-linear-gradient(#999, #999 5px, #fff 5px, #fff 10px);

斜めストライプ

斜めストライプは以下のような記述で表現できる。

background: repeating-linear-gradient(45deg, #999, #999 5px, #fff 5px, #fff 10px);