HTML
<body>
<div class="cactus">
<div class="shadow">
</div>
<div class="right">
<div class="cube top"></div>
<div class="cube front"></div>
<div class="cube side"></div>
</div>
<div class="fork">
<div class="cube top"></div>
<div class="cube front"></div>
</div>
<div class="middle">
<div class="cube top"></div>
<div class="cube front"></div>
<div class="cube side"></div>
</div>
<div class="fork-left">
<div class="cube top"></div>
<div class="cube front"></div>
</div>
<div class="left">
<div class="cube top"></div>
<div class="cube front"></div>
<div class="cube side"></div>
</div>
</div>
</body>
SCSS
$top: #b9dd70;
$front: #83d281;
$side: #6aaf96;
body {
min-height: 100vh;
background: linear-gradient(to bottom, #cee7d4 0%, #f5f4c9 100%);
overflow: hidden;
}
.cube {
width: 20px;
height: 20px;
transform-origin: 0 0;
}
.cactus {
position: relative;
top: calc(100vh - 300px);
left: 350px;
width: 400px;
height: 400px;
}
.middle {
position: absolute;
top: 0;
left: 20px;
}
.fork {
position: absolute;
top: 25px;
left: 37px;
}
.fork-left {
position: absolute;
top: 80px;
left: 3px;
}
.right {
position: absolute;
top: 0px;
left: 54px;
}
.left {
position: absolute;
left: -14px;
top: 70px;
}
.top {
background-color: $top;
transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}
.front {
height: 160px;
background: $front;
transform: rotate(-30deg) skewX(-30deg) translate(0, -17px) scaleY(0.864);
}
.side {
width: 160px;
background: $side;
transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-180px, 0);
}
.fork {
.front {
height: 25px;
}
}
.right {
.front {
height: 40px;
}
.side {
width: 40px;
transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-60px, 0);
}
}
.fork-left {
.front {
height: 25px;
}
}
.left {
.front {
height: 45px;
}
.side {
width: 45px;
transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-65px, 0);
}
}
.shadow {
position: absolute;
left: -70px;
top: 96px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
width: 20px;
height: 200px;
transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}
