【CSS】しましま(縞模様)をつくる

  • 2018.10.25

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

サンプル 縦しましま(縦縞)

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度、角度自由)
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

アンカー市川|みんなで作る自分の居場所
アンカー市川|みんなで作る自分の居場所
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう