<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>
Enter fullscreen mode
Exit fullscreen mode
.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% );
}
}
}
Enter fullscreen mode
Exit fullscreen mode
Top comments (0)