yukeka
4/16/2020 - 3:15 AM

CSSのみでテキストにノート風の罫線を引く

CSSのみでテキストにノート風の罫線を引く

css.markdown
content_copyfile_download
  • Rendered
  • Source

CSSのみでテキストにノート風の罫線を引く

A Pen by yukeka on CodePen.

License.

index.html
content_copyfile_download
<div class="container">
  <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
style.css
content_copyfile_download
.container {
  width: 800px;
  margin: 32px auto;
  padding: 2em 1em;
  border: 1px solid #b3b3b3;
  box-shadow:2px 2px 0 rgba(0,0,0,.1);
}

p {
  padding: 1px 1.5em;
  background: linear-gradient(180deg,transparent 0,transparent 98%,#828282 1px);
  background-size: 100% 4em;
  line-height: 4em;
  border-top: 1px solid #828282;
}

@media screen and (max-width: 800px) {
  .container {
    width: 90%;
  }
}