CSS
body {
overflow: hidden;
background: #fff;
}
.medium {
margin: calc(50vh - 165px) calc(50vw - 165px);
position: relative;
width: 110px;
height: 225px;
transform-origin: top left;
transform-style: flat;
border-radius: 6px;
transform: skewY(26deg);
}
.medium:before,
.medium .two,
.medium .three {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: inherit;
transform-origin: inherit;
}
.medium:before {
content: "";
z-index: 3;
background: #00AB6C;
border-top-right-radius: 3px;
}
.medium .two {
transform: rotateX(-57.75deg) skew(26deg);
background: #14C767;
z-index: 2;
border-bottom-left-radius: 0;
border-top-right-radius: 2px;
}
.medium .three {
top: -105px;
left: 214px;
transform-origin: bottom left;
transform: skew(-25deg) translateX(-104.5px);
background: #0BE370;
z-index: 1;
border-top-right-radius: 4px;
}
.medium .two,
.medium .three {
border-bottom-right-radius: 0;
}
.medium .four {
position: relative;
width: inherit;
height: inherit;
border-radius: inherit;
left: 214px;
top: -105px;
background: #32FC8D;
}
.medium:before,
.medium .four {
border-top-right-radius: 2px;
border-bottom-right-radius: 12px;
}
