背景をストライプ(ボーダー)にしたいとき、ループする素材で作ってもいいけど、CSSで作れると調整がしやすいので便利ですよね!
ということで今回は、CSSだけでストライプ(ボーダー)を実装してみます。

CSSだけでストライプ(ボーダー)を実装する方法

では早速、じっそうしていきまっしょい!

まずは、HTML。

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

コンテンツの中身が、ないので「bg」というclassで横幅と高さを指定します。
普段使用する際には、「bg」は必要ないと思います。

続いて、CSS.

.bg{
    width: 100%;
    height: 300px;
}

.bg-border{
    background-color: #fc693b;
    background-image: repeating-linear-gradient(-45deg,#fff, #fff 7px,transparent 0, transparent 14px);
}

「repeating-linear-gradient」のグラデーションを使ってストライプ(ボーダー)の形を作ります。
間に入っている「px」指定している部分で、ボーダーの幅スペースを指定しています。

CSSだけでストライプ(ボーダー)を実装するデモ

そんな感じ!

関連記事