斜線を描けるCSS:linear-gradient とは?

linear-gradientは、グラデーションを指定する際に使用するプロパティです。
本来は上記のようにグラデーションを指定するのに使われるのですが、そのグラデーションを利用すると斜線をCSSで描くことができます。

linear-gradientの記述方法

MDNを参考すると

linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色);

という記述方法です。具体例を見ると、

See the Pen 0deg by Kyosuke Kaneko (@kyosuke-kaneko) on CodePen.

今回はわかりやすく、<div>タグで囲んでいます。
0degは時計の12時の部分を0度とする角度を示して、その方向に向かってグラデーションを配色していきます。
今回は0度に向かってblueからyellowが配色されていきます。

このグラデーションの角度または方向という部分はその名通り方向も指定することができます。

See the Pen
blue-yellow
by Kyosuke Kaneko (@kyosuke-kaneko)
on CodePen.

ここではto leftと指定することで左に向かってだんだんとyellowになるようにしています。
もちろんto bottom, to left top, to bottom leftなど様々な記述の仕方があります。

途中色の使い方

斜線を描くためには途中色を応用しなければならないのでこの途中色の使い方を紹介しようと思います。

途中色は開始色と終了色の間に配置され、指定をしなければ均等に配色がなされます。

See the Pen
wvWBPwm
by Kyosuke Kaneko (@kyosuke-kaneko)
on CodePen.

条件を指定することで思い通りに配色できるだけでなく、グラデーションではなく、はっきりと配色の境を分けることができます。

See the Pen
red-black-green-blue
by Kyosuke Kaneko (@kyosuke-kaneko)
on CodePen.

これは途中色は開始位置と終了位置を指定できるという性質を利用しています。
最初と最後にあるredblueは自動的に開始色と終了色に指定されます。
開始色のred44%まで指定され、44%から60%までblackに指定することでグラデーションになることなく、明確に配色の仕切りをすることができています。同様にgreen60%という開始位置もblackの終了位置と明確に分かれています。

しかし、greenの終了位置が74%なのに対して、blueの終了位置が80%であるため、その間の6%はグラデーションになっています。
つまり、開始位置と終了位置の指定でグラデーションも配色の仕切りもできるのです。
これを応用することで、線を描くことができます。

See the Pen
transparent-blue
by Kyosuke Kaneko (@kyosuke-kaneko)
on CodePen.

開始色と終了色をtransparentにすることで途中色の青が線のように配色されています。
このグラデーションの角度または方向を変えるだけで車線を描くことができます。

実際に斜線を描いてみる

例として右上に向かう斜線を描いてみようと思います。

See the Pen
oblique line
by Kyosuke Kaneko (@kyosuke-kaneko)
on CodePen.

この右上に向かう斜線のときはtransparent 50%left topに向かって描かれる関係上右下の頂点から配色が開始されるので、斜線を描く時はグラデーションの角度または方向に注意が必要です。

blackの太さを変更することで斜線の太さを変更するということやlinear-gradient内の指定で色も角度も変更することが可能です。

まとめ

今回は私の開発にも必要になったlinear-gradientを特集してみました。

ワンポイントアドバイスですが、この要素自体のwidthを親要素より大きくすることやwidth: 110%などと指定し、overflow-x: hiddenでとびたした部分を親要素のwidthに合わせることができるので、斜線の先端の線が途切れてしまうという状態は改善することができるのでぜひお試しください。

コメント

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