<div class="print">
<div class="paper-part">
<div class="paper">
<p>We love CSS ❤️</p>
</div>
</div>
<div class="bottom">
<div class="line-button"></div>
</div>
</div>
*{
margin:0;
}
:root{
--bg : #93c456;
--print : #3e3c3f;
--shadow: #0e0c0f;
--paper: #fefefe;
--corner: #bfc1c3;
--corner-shadow: #e6e7e5;
}
body{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
position:relative;
background: var(--bg);
}
.print{
transform:scale(1.5);
}
.bottom{
width:20vw;
height:8.5vw;
background:var(--print);
border-radius:.5vw;
position:relative;
display:flex;justify-content:center;
}
.bottom:before{
content:'';
position:absolute;
background:var(--shadow);
width: 14vw;
height: 4.5vw;
bottom:0;
}
.bottom:after{
content:'';
position:absolute;
background:var(--print);
width: 13.5vw;
height: 2.5vw;
bottom:0;
}
.line-button{
position:absolute;
background:var(--shadow);
width: 100%;
height: .25vw;
top:2.8vw;
}
.line-button::after{
content:'';
position:absolute;
background:var(--paper);
width: 1.5vw;
height: .5vw;
bottom:1.25vw; left:3vw;
}
.paper-part{
background:var(--print);
width: 13.5vw;
height: 4vw;
margin-left:3.5vw;
position:relative;
}
.paper-part::after{
content:'';
position:absolute;
background:var(--shadow);
width: 11.5vw;
height: 5.5vw;
bottom:0;
left:1vw;
}
.paper{
background:var(--paper);
width: 9.5vw;
height: 8vw;
left:2vw;
bottom:0vw;
position:relative;
position:absolute;
z-index:99;
clip-path: polygon(
0 0,
8.5vw 0,
9.5vw 1vw,
9.5vw 8vw,
0 8vw,
0 0
)
}
.paper::before{
content:'';
height : 0;
width : 0;
border-right : 1vw solid transparent;
border-bottom : 1vw solid var(--corner);
position:absolute;
top:-.1vw;
right:-.1vw;
}
.paper::after{
content:'';
height : 0;
width : 0;
border-left : 1vw solid transparent;
border-top : 1vw solid var(--corner-shadow);
position:absolute;
top:.9vw;
right:-.1vw;
}
.paper p{
margin:3.5vw 0 0 1vw;
font-size:.8vw;
font-family: 'courier';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.