CSSだけでストライプをつくる

今回はCSSだけでストライプ（縞）模様を作っていきます

ベースは「背景グラデーション」

ストライプ模様を作るためには

background-image セレクタの linear-gradient か repeating-linear-gradient を使用します。

linear-gradient を使った方法

まずは linear-gradient を使ったグラデーションの作り方です

横向きのストライプ

See the Pen stripe-1 by subaru (@subaru_works) on CodePen.

HTML

<div class="stripe"></div>

CSS

.stripe {
  background-image: linear-gradient(0deg, #fff 25%, #8869d1 25%, #8869d1 50%, #fff 50%, #fff 75%, #8869d1 75%, #8869d1);
  background-size: 40px 40px;
}

HTMLはdiv要素にClassを付けておきます。

CSSでは background-image を使って、角度0度で
開始点から 0%→25%→50%→75%→100% と、それぞれの位置で
色を白（#fff) と紫（#8869d1）を切り替えます。

ストライプの間隔の広さは background-size で調整することができます。

縦向きのストライプ

See the Pen stripe-2 by subaru (@subaru_works) on CodePen.

CSS

.stripe {
  background-image: linear-gradient(90deg, #fff 25%, #8869d1 25%, #8869d1 50%, #fff 50%, #fff 75%, #8869d1 75%, #8869d1);
  background-size: 40px 40px;
}

HTMLは先程の例と同じままでOKです。

CSSでは background-image の角度の部分を変更します。
横向きの時は 0deg でしたが、縦向きの場合は 90deg で指定します

斜めストライプ

See the Pen stripe-3 by subaru (@subaru_works) on CodePen.

こちらも角度の変更だけで作ることができます。

CSS

.stripe {
  background-image: linear-gradient(-45deg, #fff 25%, #8869d1 25%, #8869d1 50%, #fff 50%, #fff 75%, #8869d1 75%, #8869d1);
  background-size: 40px 40px;
}

今回は角度を -45deg にしています。
角度の指定はマイナス指定でもOKです。

repeating-linear-gradient を使った方法

横向きのストライプ

See the Pen stripe-3 by subaru (@subaru_works) on CodePen.

HTML

<div class="stripe"></div>

CSS

.stripe {
  background: repeating-linear-gradient( 0deg, #fff,  #fff 10px, #e2efa9 10px, #e2efa9 20px);
}

こちらはコードの書き方がシンプルになって、先程の linear-gradient よりも
直感的に書くことができるかと思います。

この記述の場合は、
開始点から 0px→10px→20px と、それぞれの位置で
色を白（#fff) と黄色（#e2efa9）を切り替えます。

先程は background-size を使ってストライプの間隔を調整しましたが、
この記述方法では色指定といっしょに書くことができます

縦向きのストライプ

See the Pen stripe-4 by subaru (@subaru_works) on CodePen.

こちらも角度の指定のみを変更しています。

斜めストライプ

See the Pen stripe-5 by subaru (@subaru_works) on CodePen.

こちらも角度の指定のみの変更でOKです。

使い所サンプル

見出しの背景にすると可愛い

See the Pen stripe-6 by subaru (@subaru_works) on CodePen.

テキストエリアの装飾など

See the Pen stripe-7 by subaru (@subaru_works) on CodePen.

以上です。
可愛い系のデザインの時などに使ってみてください。