CSS でストライプを再現する
published:
要素の背景などに使われるストライプのパターンを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);