div.block
div.note
| ノートのような見た目を作ってみました。
br
| ↓ポイントはこちら↓
br
| background-image: linear-gradient(#ccc 1px, transparent 1px);
br
| background-size: 100% 2em;
br
br
| 1pxは#cccのグレー。1px以降は透明にすることで、1pxの線が3em間隔で、表示されています。
View Compiled
.block {
width: 80%;
padding: 10px;
margin: auto;
}
.note {
width: 100%;
/* ここから */
line-height: 3;
background-image: linear-gradient(#ccc 1px, transparent 1px);
background-size: 100% 3em;
padding-bottom: 1px;
/* ここまで */
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.