HTML
<div class="notepad">
<div class="notepad-top"></div>
<div class="notepad-content">
<div class="notepad-content-left"></div>
<div class="notepad-content-right"></div>
</div>
<div class="notepad-content">
<div class="notepad-content-left"></div>
<div class="notepad-content-right"></div>
</div>
<div class="notepad-content">
<div class="notepad-content-left"></div>
<div class="notepad-content-right"></div>
</div>
<div class="notepad-content">
<div class="notepad-content-left"></div>
<div class="notepad-content-right"></div>
</div>
</div>
<div class="pencil">
<div class="pencil-top"></div>
<div class="pencil-middle"></div>
<dic class="pencil-bottom"></div>
</div>
CSS
/* general styles */
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.notepad {
width: 220px;
height: 248px;
background-color: #F2F2F2;
border: 15px solid #4CDBC4;
border-radius: 12px;
position: relative;
padding: 20px 24px 12px 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.notepad-top {
width: 110px;
height: 38px;
background-color: #40596B;
position: absolute;
top: -28px;
left: 50%;
margin-left: -55px;
border-radius: 12px 12px 0 0;
}
.notepad-top:before {
content: '';
position: absolute;
width: 16px;
height: 16px;
background-color: #fff;
border: 10px solid #40596B;
border-radius: 50%;
top: -18px;
left: 50%;
margin-left: -18px;
}
.notepad-content {
height: 36px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.notepad-content-left {
height: 100%;
width: 36px;
background-color: #54C0EB;
}
.notepad-content-right {
width: 102px;
height: 16px;
background-color: #ACB3BA;
}
.pencil {
width: 36px;
height: 248px;
margin-left: 20px;
display: flex;
flex-direction: column;
}
.pencil-top {
background-color: #40596B;
width: 100%;
height: 50px;
border-radius: 12px 12px 0 0;
border-bottom: 14px solid #F2F2F2;
}
.pencil-middle {
background-color: #FF7058;
width: 100%;
flex: 1;
}
.pencil-bottom {
width: 100%;
height: 42px;
position: relative;
}
.pencil-bottom:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 42px 18px 0 18px;
border-color: #ffd15c transparent transparent transparent;
}
.pencil-bottom:after {
content: '';
position: absolute;
left: 50%;
margin-left: -9px;
bottom: 1px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 9px 0 9px;
border-color: #334A5E transparent transparent transparent;
}
