
画像を使わずに、cssのみでノートのような罫線を引く方法。
実線
・サンプル

・html
|
<div class="note01"> <p>cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。<br /> <br /> cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。</p> </div> |
・css
|
.note01 p { background-image: linear-gradient(180deg, transparent 0, transparent 98%, #CCC 100%); background-size: 100% 3em; line-height: 3em; } |

上から下にかけて(180deg)の背景グラデーション(linear-gradient)で線を表現し、リピートさせることで、ノート風の罫線を実現しています。
波線
・サンプル

・html
|
<div class="note02"> <p>cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。<br /> <br /> cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。cssのみでノートのような罫線を引くことができます。</p> </div> |
・css
|
.note02 p { background-image: linear-gradient(90deg, transparent 0, transparent 50%, #fff 50%, #fff 100%), linear-gradient(180deg, transparent 0, transparent 98%, #CCC 100%); background-size: 8px 100%, 100% 3em; line-height: 3em; } |
