<div class="wallet">
<div class="rectangle">
<div class="rectangle__front"></div>
<div class="closure"></div>
</div>
<div class="card">
<div></div>
<div></div>
</div>
</div>
.wallet {
--width: 400px;
position: relative;
}
.rectangle {
width: var(--width);
height: calc(var(--width) * 0.72);
position: relative;
background-color: hsl(63, 74%, 35%);
border-radius: calc(var(--width) * 0.06);
z-index: 1;
&__front {
width: calc(var(--width) * 0.92);
height: calc(var(--width) * 0.72);
position: absolute;
right: 0;
background-color: hsl(62, 65%, 43%);
border-radius: calc(var(--width) * 0.06);
overflow: hidden;
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
background-color: hsla(0, 0%, 0%, 0.035);
}
}
}
.closure {
width: calc(var(--width) * 0.4);
height: calc(var(--width) * 0.26);
position: absolute;
left: calc(var(--width) * -0.04);
top: 50%;
transform: translateY(-50%);
background-color: lighten(hsl(62, 65%, 43%), 8%);
border-radius: calc(var(--width) * 0.12) calc(var(--width) * 0.6)
calc(var(--width) * 0.6) calc(var(--width) * 0.12);
overflow: hidden;
box-shadow: 8px 8px 22px -10px hsla(0, 0%, 0%, 0.2);
&::after {
content: "";
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
background-color: hsla(0, 0%, 0%, 0.035);
}
&::before {
content: "";
width: calc(var(--width) * 0.12);
height: calc(var(--width) * 0.12);
position: absolute;
right: calc(var(--width) * 0.06);
top: 50%;
transform: translateY(-50%);
background-color: hsl(0, 0%, 100%);
border-radius: 100rem;
}
}
.card {
width: calc(var(--width) * 0.72);
height: calc(var(--width) * 0.4);
position: absolute;
top: calc(var(--width) * -0.18);
left: calc(var(--width) * 0.06);
background-color: hsl(0, 0%, 45%);
border-radius: calc(var(--width) * 0.04);
transform: rotate(-12deg);
overflow: hidden;
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: hsla(0, 0%, 0%, 0.035);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
div {
height: calc(var(--width) * 0.12);
width: calc(var(--width) * 0.12);
position: absolute;
right: calc(var(--width) * 0.04);
border-radius: calc(var(--width) * 0.04);
&:first-child {
top: calc(var(--width) * 0.04);
background-color: hsl(41, 97%, 55%);
}
&:last-child {
top: calc(var(--width) * 0.2);
background-color: hsl(0, 0%, 100%);
}
}
}
Top comments (0)