【css3】背景を斜線にするlinear-gradientの書き方
2016年10月23日
最近、css3のlinear-gradientを使って背景を斜線で表現することがあるのですが、ジェネレーターを使って簡単には出来るものの仕組みがいまいち分かっていなかったので、勉強も兼ねて自分で書いてみました。
下記がサンプルコードと内容です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.linear{ width:300px; height:300px; background-color: #ffffff; border:1px solid #000000; /* ココから下 ↓ */ background: #ffffff; background-image:linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584); background-image:-webkit-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584); background-image:-moz-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584); background-image:-ms-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584); -webkit-background-size:50px 50px; -moz-background-size:50px 50px; -ms-background-size:50px 50px; background-size:50px 50px; /* 2つ書かないと、firefoxで崩れがおきる */ } |
１、さっそく、開始色と終了色を書いてみよう！
開始色（#fff）と終了色（#82F584）のみを書いた場合は、デフォルトの設定で上から下にグラデーションが掛かるようになっている
|
1 |
background-image:linear-gradient(#fff,#82F584); |
スポンサードサーチ
２、%（パーセント）を指定して開始色の表示範囲を決める
開始色（#fff）の後にスペースを入れて50%を指定すると、白とみどりが半分ずつのグラデーションになる
|
1 |
background-image:linear-gradient(#fff 50%, #82F584); /* 上50%は白、下はみどりのグラデーション */ |
３、開始色と終了色の境目を明確にわける
終了色（#82F584）にも50%をつけたことで、グラデーションがない、白とみどりが半分ずつの背景色になった。このことから、開始色（#fff）が50%まで、それ以降の50%は終了色（#82F584）にきっちり分かれることがわかった
|
1 |
background-image:linear-gradient(#fff 50%, #82F584 50%); /* 上50%は白、下50％はみどり ※この指定で半分にわかれる */ |
スポンサードサーチ
４、deg(degree:度)を指定して斜めにする
-45度（-45deg）を入れて斜線にしたいと思います。
ここで注意したいのが、ベンダープレフィックス無しのlinear-gradientだと-45degが、なぜか135degの角度になってしまいます。
対処法として、ベンダープレフィックスを記述したcssを後に書くか、ベンダープレフィックス無しの記述を削除するかで解決できるかと思います。
|
1 2 3 4 |
background-image:linear-gradient(-45deg, #fff 50%, #82F584 50%); /* -45deg で45度マイナス回転するので斜めになる */ background-image:-webkit-linear-gradient(-45deg, #fff 50%, #82F584 50%); background-image:-moz-linear-gradient(-45deg, #fff 50%, #82F584 50%); background-image:-ms-linear-gradient(-45deg, #fff 50%, #82F584 50%); |
５、背景のサイズを指定する
斜線ぽくなってきたので、background-imageで太さを指定し、繰り返し表示していくようにします。
50pxで指定しているので、縦横300pxの中に、6×6=36のブロックができます。
この時、background-image:○ ○;と2つ書かないとfirefoxで崩れがおきるので要注意。
|
1 |
background-size:50px 50px; /* width300pxに対して50pxを指定すると、横に6つならびになる */ |
６、斜線を繰り返し表示する
先ほど、50%ずつ区切っていたのでブロックのようになっていましたが25%ずつ区切っていくと、うまく重なり合い斜線の繰り返しが表示されます。
|
1 |
background-image:-webkit-linear-gradient(-45deg, #fff 25%, #82F584 25%, #82F584 50%, #fff 50%, #fff 75%, #82F584 75%, #82F584); /* 完成版 */ |
スポンサードサーチ
ちなみに仕組みはこんな感じ！
最後に
ブラウザごとに、斜線の繰り返しが上手く重なり合わずギザギザになってしまうことがありますが、これはギザギザが発生しているブラウザ個別にcssを書いて対処できるかと思います。（他にいい方法があったら教えてください！）
関連記事
2016年9月25日 【css3】縞（シマ）模様や、チェック、ストライプなどの背景を簡単に表現できる便利なジェネレーター
2017年4月19日 超便利！ img要素を表示領域（枠内）で上下左右に中央表示させる方法
2016年11月5日 超簡単！cssを使って背景画像のみ透過にする方法- 2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
- 2019年2月24日 js不要！cssのみで『無限ループスライダー』を作成する方法
