<div class="card"></div>
html,
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.card {
background-color: #efefef;
height: 170px;
width: 210px;
border-radius: 20px;
background-image: linear-gradient(90deg, #d5493c 17%, transparent 17%),
linear-gradient(90deg, transparent 83%, #d5493c 83%),
linear-gradient(145deg, #e3e3e390 60%, transparent 50%),
linear-gradient(-134deg, #e8e8e8 60%, transparent 50%);
position: relative;
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: -78%;
left: -15%;
box-shadow: 1px 1px 5px #000;
background-color: #f2f2f2;
border-right: 30px solid #d5493c;
border-bottom: 30px solid #d5493c;
transform: rotate(51deg) skewY(-12deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.