CSSで背景をボーダー・ストライプにしてみよう

2018.07.13

こんにちは。マークアップエンジニアの近藤です。

つい画像にしてしまいがちなボーダー・ストライプ背景ですが、
CSSでの再現にチャレンジしてみるのも面白いかと思います。
最近使う機会があったので、今回は備忘録も兼ねてCSSでのストライプ、ボーダーの作り方です。

CSSでトライプ・ボーダーを作ってみよう

基本形はこちらです。

background:repeating-linear-gradient(角度, カラー1 開始位置, カラー1 終了位置, カラー2 開始位置, カラー2 終了位置,...);

【１】ボーダー

まずはボーダー。ボーダーの場合は角度を指定する必要がないので省略します。

.ex01 {
background:repeating-linear-gradient(#e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
}

【２】ストライプ

縦方向に回転させることでストライプにします

.ex02 {
background:repeating-linear-gradient(90deg, #e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
}

【３】斜め

角度を変えれば、斜めも再現できます。

斜め1（45度）

.ex03 {
background:repeating-linear-gradient(45deg, #e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
}

斜め2（30度）

.ex04 {
background:repeating-linear-gradient(-30deg, #e79901 0, #e79901 10px, #e2e7eb 10px, #e2e7eb 20px);
}

【４】多色

ちなみにこれ、3色以上や一部幅が違っても指定できます。便利ですね。

3色以上ストライプ（例は5色）

.ex05 {
background:repeating-linear-gradient(90deg, #e79901 0, #e79901 5px, #e2e7eb 5px, #e2e7eb 10px, #f4c900 10px, #f4c900 15px, #ffd800 15px, #ffd800 20px, #fff 20px, #fff 25px);
}

【５】幅違い

.ex06 {
background:repeating-linear-gradient(90deg, #e79901 0, #e79901 5px, #e2e7eb 5px, #e2e7eb 30px, #f4c900 30px, #f4c900 45px);
}

使う機会がそんなにないかもしれませんが、％での指定でも大丈夫です。

.ex07 {
background:repeating-linear-gradient(90deg, #e79901 0, #e79901 2%, #e2e7eb 2%, #e2e7eb 4%, #f4c900 4%, #f4c900 6%);
}

対応ブラウザはこちら
現行のブラウザはほぼ対応していますので、特に心配なく利用できると思います。

まとめ

以前は繰り返しの画像を作成して使っていた方も多いと思いますが、
そこそこ複雑なものもCSSで作れてしまいます。
デザイナーが意図する表現をCSSだけで表現するのもなかなか面白いですよ。
機会がありましたら、ぜひ色々と試してみてください。