CSSのborder-imageを使って下線の色を途中から変更する方法

前回の記事ではpositionや擬似クラスを使って、borderの途中から色を多少強引にする方法を紹介しましたが、その後ひょんなことからもっと簡単に実現できる方法をみつけました！

border-image というCSSのプロパティを使う方法です。

今回はこのborder-imageを使ってもっと簡単に途中から色を変える方法を紹介します。

前回の記事

≫ CSSで下線(border-bottom)の色を途中から変更する方法

CSSのborder-imageを使って下線の色を途中から変更する方法

border-imageって見て分かるように、borderに画像を設定できるプロパティです。

CSS3で追加されたプロパティのようです。

HTML

CSS

解説

CSSの1-7行目はボーダーを設定するブロック要素を用意しているだけです。

CSS 9行目 border-bottom: 3px solid;

まず border を用意します。3pxは太さで solid は実線になります。

border-image: linear-gradient(90deg, #0000FF 60%, #FF0000 40%);

ここでborderの画像を設定しますが、url()を使って実際に画像を指定するのではなく linear-gradient() を使ってグラデーションを指定します。

linear-gradient() でグラデーションの設定をする方法は次の記事を参考にしてください。

≫ CSSでグラデーションを作成する方法

ここでグラデーション？？と思うかもしれません。

実際に作りたいものは途中からパッと色が切り替わっているものです。

それを実現するために #0000FF 60% のようにカラーの後ろに幅を指定します。

60％と指定すると60％分の幅はグラデーションにしないでベタ塗り状態になります。

残り40％も同様に次の色をベタ塗り状態にすれば、途中で色が切り替わるborderの完成です。

ちなみに 90deg はグラデーションの方向の角度で、90degを指定すると左から右になります。

border-image-slice プロパティは、、、ぶっちゃけあまり使い方分かってないです！すみません！

縦方向の線の場合

上では下線の色を切り替えるサンプルを作成しました。

一応、縦方向の線（border-leftやborder-right）の設定の仕方も紹介します。

HTMLは同じです。

borderを設定するための要素を用意してください。

borderを描画するCSSをちょっといじります。

今回は左側の縦線を描画するため、border-left に変更しました。

それとグラデーションの角度を変更します。

border-image: linear-gradient(180deg, #0000FF 60%, #FF0000 40%);

90degだと左から右になってしまうので、上から下にするため 180deg を指定しました。

これでサイドの縦線の色を途中から切り替えることができるはずです。

まとめ

この記事作るために全然自分の仕事と関係ないCSSを書いて実験していました。

しかし、線の色を途中から変えたい場合ってあるんですかね？

僕は今までそれを求められたことはないです。

なので多くの「色を途中で変えたい人」にこの記事が読まれることを願いします。