【コピペで簡単】CSSで作る伝統的ストライプ16パターン

スポンサーリンク

スタンダードなものから、ちょっと変わったものまで。CSSのみで作る、ストライプの背景です。

CSSですので、コードをコピペしてご利用いただけます。
ご利用については、ご自由にどうぞ。もちろん、お好みに合わせてカスタマイズもご自由に。但し、コードをご利用の際は自己責任にてお願いいたします。

ストライプ背景をCSSで作る方法については、「CSSだけでストライプの背景を作ってみる」をご覧ください。

ストライプ背景(縦縞)

ピンストライプ

.pin-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #016FB9 0px,#016FB9 40px,
    #ffffff 40px,#ffffff 41px);
}

ロンドンストライプ

.london-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #0E0E52 0px,#0E0E52 20px,
    #ffffff 20px,#ffffff 40px);
}

ダブルストライプ

.double-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #D5573B 0px,#D5573B 20px,
    #ffffff 20px,#ffffff 22px,
    #D5573B 22px,#D5573B 27px,
    #ffffff 27px,#ffffff 29px);
}

トリプルストライプ

.triple-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #E55381 0px,#E55381 20px,
    #ffffff 20px,#ffffff 21px,
    #E55381 21px,#E55381 22px,
    #ffffff 22px,#ffffff 23px,
    #E55381 23px,#E55381 24px,
    #ffffff 24px,#ffffff 25px);
}

ペンシルストライプ

.pencil-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #00A676 0px,#00A676 30px,
    #ffffff 30px,#ffffff 33px);
}

ヘアラインストライプ

.hairline-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #6A0F49 0px,#6A0F49 1px,
    #ffffff 1px,#ffffff 2px);
}

シックシンストライプ(親子縞)

.thickandthin-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #BDB246 0px,#BDB246 40px,
    #ffffff 40px,#ffffff 60px,
    #BDB246 60px,#BDB246 70px,
    #ffffff 70px,#ffffff 90px);
}

オルタネイトストライプ(交互縞)

.alternate-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #B81365 0px,#B81365 20px,
    #ffffff 20px,#ffffff 40px,
    #026C7C 40px,#026C7C 80px,
    #ffffff 80px,#ffffff 100px);
}

チョークストライプ

.chalk-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #055864 0px,#055864 20px,
    #769799 20px,#ffffff 24px,
    #ffffff 24px,#769799 28px);
}

カスケードストライプ(滝縞)

.cascade-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #7E007B 0px,#7E007B 40px,
    #ffffff 40px,#ffffff 44px,
    #7E007B 44px,#7E007B 64px,
    #ffffff 64px,#ffffff 68px,
    #7E007B 68px,#7E007B 78px,
    #ffffff 78px,#ffffff 82px,
    #7E007B 82px,#7E007B 90px,
    #ffffff 90px,#ffffff 92px,
    #7E007B 92px,#7E007B 95px,
    #ffffff 95px,#ffffff 96px);
}

オンブレストライプ(鰹縞)

.ombre-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #ff8000 0px,#ff8000 10px,
    #ffaa55 10px,#ffaa55 20px,
    #ffd5aa 20px,#ffd5aa 30px,
    #ffead5 30px,#ffead5 40px,
    #ffd5aa 40px,#ffd5aa 50px,
    #ffaa55 50px,#ffaa55 60px);
}

キャンディストライプ

.candy-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #ebe693 0px,#ebe693 10px,
    #ffffff 10px,#ffffff 20px,
    #e28ba0 20px,#e28ba0 30px,
    #ffffff 30px,#ffffff 40px,
    #91c8d9 40px,#91c8d9 50px,
    #ffffff 50px,#ffffff 60px);
}

子持ち縞

.komochi-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #ffffff 0px,#ffffff 20px,
    #E15554 20px,#E15554 22px,
    #ffffff 22px,#ffffff 24px,
    #E15554 24px,#E15554 44px,
    #ffffff 44px,#ffffff 46px,
    #E15554 46px,#E15554 48px);
}

タータンストライプ

.tartan-stripe {
  background-image: repeating-linear-gradient(
    90deg,
    #9c3428 0px,#9c3428 10px,
    #3d3c3a 10px,#3d3c3a 20px,
    #807f7e 20px,#807f7e 24px,
    #3d3c3a 24px,#3d3c3a 28px,
    #807f7e 28px,#807f7e 32px,
    #3d3c3a 32px,#3d3c3a 42px,
    #9c3428 42px,#9c3428 52px,
    #3d3c3a 52px,#3d3c3a 56px,
    #9c3428 56px,#9c3428 60px,
    #3d3c3a 60px,#3d3c3a 64px);
}

斜めストライプ

ダイアゴナルストライプ

.diagonal-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    #FAD4D8 0px,#FAD4D8 20px,
    #ffffff 20px,#ffffff 40px);
}

レップストライプ

.repp-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #2a2c4d 0px,#2a2c4d 80px,
    #232841 80px,#232841 85px,
    #652420 85px,#652420 105px,
    #232841 105px,#232841 110px,
    #5294b2 110px,#5294b2 150px);
}

まとめ

伝統的に名前がついているようなストライプを中心に、いろいろ作成してみました。

これらは全てCSSのみで作成されていますので、色を変えたり角度を変えたり太さを変えたり、CSSを変更するだけで自在にお好みに合わせたカスタマイズが出来ます。

詳しい変更方法については、「CSSだけでストライプの背景を作ってみる」をご覧ください。

タイトルとURLをコピーしました