背景をストライプ(ボーダー)にしたいとき、ループする素材で作ってもいいけど、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だけでストライプ(ボーダー)を実装するデモ
そんな感じ!
ABOUT ME