DEV Community

Sekti Wicaksono
Sekti Wicaksono

Posted on

CSS Battle - #9 Tesseract

#css #cssbattle

HTML

<div class="box-bg"></div> <div class="square"></div> <div class="square small"></div> <div class="square circle"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

 body { margin: 0; background: #222730; display: flex; align-items: center; justify-content: center; position: relative; } .box-bg { background: #4CAAB3; height: 150px; width: 100%; } .square { position: absolute; background: #222730; height: 250px; width: 250px; transform: rotate(45deg); } .small { background: #4CAAB3; height: 150px; width: 150px; } .circle { background: #393E46; height: 50px; width: 50px; border-radius: 50%; }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)