CSSだけで斜めのストライプを作る

画像を使わずにスタイルシートだけで斜めのストライプ模様を作成する方法を紹介します。見出しやボックスの背景に敷いたりする場合に使えたりすることもあるので、覚えておくと便利ではないでしょうか。

ストライプの作り方

ストライプ柄を表現するには、グラデーションを利用して実現します。

.stripe {
  background-image: linear-gradient(-45deg, #fff 25%, #00bfff 25%, #00bfff 50%, #fff 50%, #fff 75%, #00bfff 75%, #00bfff);
  background-size: 4px 4px;
}

「-45deg」でボーダーの角度を指定しています。右斜めの斜線にするので、マイナスの値を指定しています。あとは、色の指定をしていきます。25％間隔で交互に色を指定することでストライプを表現することができます。あとは、background-sizeプロパティを使ってボーダーの太さを指定します。

他にも「repeating-linear-gradient()」という関数を利用してストライプ柄を作ることもできます。

.stripe {
  background: repeating-linear-gradient(-45deg, #ffae00, #ffae00 5px, #fce6ba 5px, #fce6ba 10px);
}

先程と同じように、角度と色を指定をしていきます。0～5pxを「#ffae00」の色で、5～10pxを「#fce6ba」の色で塗り、リピートさせるようにすると斜めのストライプを表現することができます。このpxの値を変えることで、ストライプの間隔が変わってきます。

このように、画像を使わなくてもCSSだけで簡単に斜めのストライプを表現することができるので、機会があれば試しに使ってみてください。