どうも7noteです。CSSだけで斜線背景を作る方法。
背景画像のパーツをbackground-repeat: repeat;を使って斜線背景を作ることができますが、CSSだけでも作る方法があるのでやり方を書いていきます。
2色
3色
ソース
/* 2色 */.bg_line2{background-image:linear-gradient(-45deg,/* 斜線の角度 */#f3f3f325%,/*グレー*/#fff25%,/*白*/#fff50%,/*白*/#f3f3f350%,/*グレー*/#f3f3f375%,/*グレー*/#fff75%,/*白*/#fff/*白*/);background-size:40px40px;/* 1タイルのサイズ */}/* 3色 */.bg_line3{background-image:linear-gradient(-45deg,/* 斜線の角度 */#66f17%,/*緑*/#f6617%,/*赤*/#f6634%,/*赤*/#6f634%,/*青*/#6f650%,/*青*/#66f50%,/*緑*/#66f67%,/*緑*/#f6667%,/*赤*/#f6684%,/*赤*/#6f684%,/*青*/#6f6/*青*/);background-size:40px40px;/* 1タイルのサイズ */}解説
斜線を作るためには、50%の位置で繰り返す必要があります。
2色の場合は、「灰白灰白」の順番で繰り返すので、それぞれ25%ずつ指定します。
3色の場合は割り切れないので目安ですが、「赤青緑赤青緑」に約17%ずつ指定します。
4色や5色を作りたい場合も同様のやり方で作ることができます。
linear-gradientは本来グラデーションを表現するものなので、グラデーションにならないように、「25%までは灰、25%からは白、50%までは灰、50%からは白・・・」というような指定方法をしています。
まとめ
画像を使う方法もありますが、CSSで書けるものはCSSで書いたほうが修正や調整が行いやすくなるので、場面によって最適な方法で書いてください。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ