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

CSSCSSデザイン

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

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

横ストライプ

See the Pen CSS only stripe2 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 CSS background design by yochans (@yochans) on CodePen.

縦ストライプ

See the Pen CSS only stripe 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 CSS background design by yochans (@yochans) on CodePen.

斜めストライプ

See the Pen CSS only stripe2 by yochans (@yochans) on CodePen.

CSS

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

斜めストライプのカラーバリエーション

See the Pen CSS background design by yochans (@yochans) on CodePen.

チェック柄1

See the Pen CSS background design 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;
}

チェック柄1のカラーバリエーション

See the Pen CSS background design by yochans (@yochans) on CodePen.

チェック柄2

See the Pen CSS background design 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;
}

チェック柄2のカラーバリエーション

See the Pen CSS background design by yochans (@yochans) on CodePen.

方眼紙1

See the Pen CSS background design 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;
}

方眼紙1のカラーバリエーション

See the Pen CSS background design by yochans (@yochans) on CodePen.

方眼紙2

See the Pen CSS background design 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;
}

方眼紙2のカラーバリエーション

See the Pen CSS background design by yochans (@yochans) on CodePen.

水玉柄1

See the Pen CSS background design 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
}

水玉柄1のカラーバリエーション

See the Pen CSS background design by yochans (@yochans) on CodePen.

水玉柄2

See the Pen CSS background design 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
}

CSSCSSデザイン

Posted by Yousuke.U