【CSS】ストライプやチェック柄などの背景パターンまとめ

2018年7月17日2019年6月12日CSS,CSSデザイン

画像を使わずにCSSだけで実装するストライプデザイン集です

サンプルではdivにクラス「bg」に適用しています

html

<div class="bg"></div>

チェック柄・ストライプ柄のCSSジェネレーターを作成しましたので是非お試し下さい

CSSストライプ柄ジェネレーター | 1 NOTES

CSSストライプ柄のカスタマイズエディタですサンプルタイプを選んで作成できます

 https://1-notes.com/stripe-pattern-css-generator/

CSSチェック柄ジェネレーター | 1 NOTES

CSSチェック柄のカスタマイズエディタです サンプルタイプを元に作成できます

 https://1-notes.com/check-pattern-css-generator/

横ストライプ

See the Pen 横ストライプ by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background: repeating-linear-gradient(white 0px, #a9a9a9 0px, #a9a9a9 15px, #696969 15px, #696969 30px);
}

縦ストライプ

See the Pen 縦ストライプ by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background: repeating-linear-gradient(90deg, #a9a9a9 0px, #a9a9a9 15px, #696969 15px, #696969 30px);
}

斜めストライプ

See the Pen 斜めストライプ by yochans (@yochans) on CodePen.

CSS

.bg{
width:100%;
height:260px;
background: repeating-linear-gradient(45deg, #a9a9a9 0px, #a9a9a9 15px, #696969 15px, #696969 30px);
}

チェック柄1

See the Pen チェック柄 by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background: linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%),
              linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%);
  background-color: #696969;
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

チェック柄2

See the Pen チェック柄２ by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%),
              linear-gradient(rgba(0, 0, 0, .5) 50%, transparent 50%);
  background-color: #696969;
  background-size: 40px 40px;
}

方眼紙柄

See the Pen 方眼紙柄 by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background-image: linear-gradient(#000 1px, transparent 0),
                    linear-gradient(90deg, #000 1px, transparent 0);
  background-size: 40px 40px;
}

方眼紙2

See the Pen 方眼紙柄２ by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background-image: linear-gradient(#000 2px, transparent 0),
                    linear-gradient(90deg, #000 2px, transparent 0),
                    linear-gradient(#000 1px, transparent 0),
                    linear-gradient(90deg, #000 1px, transparent 0);
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
}

水玉柄1

See the Pen 水玉柄 by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background: radial-gradient(#87cefa 25%, transparent 0);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

水玉柄2

See the Pen 水玉柄 by yochans (@yochans) on CodePen.

CSS

.bg{
  width:100%;
  height:260px;
  background: radial-gradient(#87cefa 25%, transparent 0),
              radial-gradient(#87cefa 25%, transparent 0);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}