CSSでマーカー線を引く方法【現役エンジニアが解説】

PROGRAM

今回は、CSSでマーカー線を引く方法について、太めの場合と細めの場合に分け、簡単に解説していきます。

太めのマーカー線

太めのマーカー線を引くには、backgroundプロパティの値に色を指定します。

backgroundプロパティに色をそのまま指定することで、100%の高さで色が表示されます。

.hoge{
    background:yellow;
}

上記のコードでは、hogeのクラスの要素に背景色を設定し、太めのマーカー線を引いています。

細めのマーカー線

細めのマーカー線を引く場合にも、backgroundプロパティの値に色を指定します。

ただし、値はlinear-gradient関数を使って、透明と着色の割合を指定する必要があります。

.hoge{
    background:linear-gradient(transparent 70%, yellow 70%);
}

上記のコードでは、hogeというクラスの要素に背景色を設定し、細めのマーカー線を引いています。

グラデーション付

グラデーション付きのマーカー線を引くためには、各色の割合を変えて指定します。

例えば、60%まで白、80%から黄色とすることで、60%から80%までグラデーションを表現できます。

.hoge{
    background:linear-gradient(white 60%, yellow 80%);
}

上記のコードでは、hogeというクラスを持つ要素に背景色を設定し、グラデーション付きのマーカー線を引いています。