CSSでマーカー線を引く方法【現役エンジニアが解説】
今回は、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というクラスを持つ要素に背景色を設定し、グラデーション付きのマーカー線を引いています。