こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

デザイナーが作ったデザインに変わった模様の背景があった場合、画像として表示しますよね。
しかし、中には知らなければついつい画像として処理してしまう模様もCSSだけで作ることが出来る背景模様もあります。
この記事では画像を使わず、CSSだけで作ることが出来る背景模様のうち、ストライプ（ボーダー）について紹介したいと思います。

ストライプ（ボーダー）の作り方

background-imageプロパティのrepeating-linear-gradient()を使うことでCSSだけでストライプ（ボーダー）を作ることが出来ます。

background-imageの使い方はこちら。

background-image: repeating-linear-gradient(ストライプの角度, 1色目の色 開始位置, 1色目の色 終了位置, 2色目の色, 開始位置, 2色目の色, 終了位置);

CSSを実際に当てはめたものがこちら。

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

0degの部分はストライプ（ボーダー）の角度を指定しています。0degの場合は水平になります。
その次に色を指定して、色の感覚（太さ）を指定しています。
1色目を0px～10px、2色目を10px～20px、再び1色目を20px～30px…という考え方で色を交互に繰り返すことでCSSでストライプ（ボーダー）を作ることが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSで作るストライプ（ボーダー）のアレンジ

太さを変える

各色の間隔を広げることでストライプ（ボーダー）の太さを変えることが出来ます。

1色目、2色目の間隔を小さくすると細いストライプ（ボーダー）になります。

CSSはこちら。

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

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

1色目、2色目の間隔を大きくすると太いストライプ（ボーダー）になります。

CSSはこちら。

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

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

数値次第でさらに細いものや太いストライプ（ボーダー）を作ることも出来ます。

角度を変える

0degの部分の数値を変更することでストライプ（ボーダー）の角度を変更することが出来ます。

90degにすると縦向きのストライプ（ボーダー）になります。

CSSはこちら。

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

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

45degにすると斜めのストライプ（ボーダー）になります。

CSSはこちら。

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

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

135degにすると先ほどとは反対向きの斜めのストライプ（ボーダー）になります。

CSSはこちら。

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

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

色を増やす

色の指定を増やすことで3色以上のストライプ（ボーダー）にすることも出来ます。

CSSはこちら。

.stripe{
    background-image: repeating-linear-gradient(0deg, #dc5a45 0px, #dc5a45 10px, #e8c72e 10px, #e8c72e 20px, #3d8582 20px, #3d8582 30px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

複数の太さにする

それぞれの色の間隔に差をつけることで複数の太さにすることが出来ます。

CSSはこちら。

.stripe{
    background-image: repeating-linear-gradient(0deg, #dc5a45 0px, #dc5a45 2px, #e8c72e 2px, #e8c72e 12px, #3d8582 12px, #3d8582 32px);
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

指定次第では面白い表現が出来そうですね。

その他模様

その他模様は下記の記事でご紹介しています。

【background-image】CSSだけでドット模様を作る方法

まとめ

いかがでしたか？
CSSのみでいろいろなストライプを作ることが出来ました。
指定次第では面白いストライプを作ることも出来そうですね。
CSSでこんな表現も出来るなんてびっくりですね。
そして、画像を使わなくてもCSSだけで作れるのは凄く嬉しいなと思いました。