【CSS】しましま（縞模様）をつくる

画像を使わずに、シマシマ模様を作ってみる。
グラデーションを使うと簡単。
いろいろな場面で使える。

サンプル 縦しましま（縦縞）

See the Pen CSSだけで、しましま（縞模様）をつくる、縦しましま by 125naroom (@125naroom) on CodePen.

サンプル 横しましま（横縞）

See the Pen CSSだけで、しましま（縞模様）をつくる、横しましま（横縞） by 125naroom (@125naroom) on CodePen.

サンプル 斜めしましま（斜縞）

See the Pen CSSだけで、しましま（縞模様）をつくる、斜めしましま（斜縞） by 125naroom (@125naroom) on CodePen.

ポイント

背景（background）をグラデーションにする。
repeating-linear-gradientで指定。

• 縦縞 → to right（右へ）
• 横縞 → to top（下から上へ）
• 斜縞 → 45deg（45度、角度自由）