ここでは、ノートや便箋のような下線をスタイルシートのみで表現する方法について見ていきます。

実線バージョン

まずは、実線が引かれたデザインを見てみましょう。

ボタンで表示を切り替えてご覧ください。

CSS

ポイントとなるスタイルシートだけ抜粋してみました。作り方のポイントは、上から下にかけて（角度が180deg）の背景グラデーション（linear-gradient関数）をかけて線を表現し、これをリピートしていることです。

これが背景画像として上下にリピートされるのでノートの線のようになるわけです。

linear-gradientについてあまり分からない方は、下記の記事も参考にすると良いと思います。

2018.06.27

CSSでグラデーションを実装｜linear-gradientの使い方

linear-gradientの使い方 ここでは線形のグラデーションを表現できるlinear-gradientの使い方についてお話します。 グラデーションには円形グラデーションというのもありますので、興味があったら下記の記事にも目を通してくださいね...

破線バージョン

次は破線にしたものを見てみましょう。

CSS

今度は、グラデーションがもうひとつ追加されています。

横に（角度が90degの）「透明→白」のグラデーションが横幅8pxで繰り返されています。

イメージとしては、この２つのグラデーションが重なり合って破線が表現される仕組みです。background-imageは、最初に指定したものが上に来ますので最初に「シマシマ」、次に「実線」を指定するようにします。

以上がCSSのみでノートや便箋のような下線を引く方法でした。