- ToDoを管理しやすい
- デザインに馴染む
- カジュアルな印象に
HTML
<ul class="list-sticky-note">
<li>ToDoを管理しやすい</li>
<li>デザインに馴染む</li>
<li>カジュアルな印象に</li>
</ul>
CSS
.list-sticky-note {
list-style: none;
padding: 0;
margin: 24px 0;
}
.list-sticky-note li {
background: #fef08a;
padding: 14px 20px;
margin-bottom: 12px;
font-size: 14px;
color: #78350f;
position: relative;
box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
transform: rotate(-1deg);
width: fit-content;
}
.list-sticky-note li:nth-child(even) {
transform: rotate(1.5deg);
}