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

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

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

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

html

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

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

横ストライプ

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 チェック柄2 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 方眼紙柄2 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;
}

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

Posted by Yousuke.U