【HTML/CSS】CSSのみで背景に斜線を入れる方法
CSSのみで背景に斜線の入れる方法とカスタマイズの仕方の紹介です。
コピペで実装できるいくつかのパターンを用意しました。
今回はグラデーションを生成するlinear-gradientではなく、
さらにそれをリピート表示してくれるrepeating-linear-gradientを使用します。
これにすることで、background-sizeを使わないのでタイル状になってしまうミスを無くせますし、カスタマイズも簡単になります。
斜線パターン１
オーソドックスな斜線です。斜線というよりはストライプですね。
２色のストライプは同じ15px幅になっています。
CSS
.rlg_01 {
background:repeating-linear-gradient(
45deg,
#ccc,
#ccc 15px,
#fff 0,
#fff 30px
);
}解説
4行目で斜線の最初の色を指定します。
5行目で最初の色の幅を決めます。
6行目は＃fff 0というように”ゼロ”を設定する事で、直前に設定した位置と同じ値になってくれます。
この場合は15pxです。
#fff 15pxと書いても同じですが、カスタマイズする場合、変更する箇所が少なく済むのでオススメです。
7行目は、6行目で指定した色の幅です。
斜線パターン2
線幅が1pxの右上がりの斜線
CSS
.rlg_02 {
background:repeating-linear-gradient(
-45deg,
#ccc,
#ccc 1px,
#fff 0,
#fff 29px
);
}解説
基本的にはパターン１と同じですが、
最初のグレーの幅を1px、白を29pxにして幅を変えています。
また角度を-45degとして右上がりにしています。135degでも同じです。
斜線パターン3
３色のストライプ
CSS
.rlg_03 {
background:repeating-linear-gradient(
60deg, #ccc, #ccc 10px, #fff 0, #fff 20px, #555 0, #555 30px
);}解説
斜線を３種類にする場合は、カラーコード 0,カラーコード サイズを追加するだけです。
斜線を4種類にする場合はさらに追加します。
