Isometric Cactus in CSS

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); }
JAVASCRIPT
Expand for more options Login