CSS PR

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

記事内に商品プロモーションを含む場合があります

背景をストライプ(ボーダー)にしたいとき、ループする素材で作ってもいいけど、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
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)