DEV Community

Cover image for CSSBattle | #16 Eye of the Tiger
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

CSSBattle | #16 Eye of the Tiger

#css #cssbattle #challenge #eyeofthetiger

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #16 Eye of the Tiger challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

Challenge:

Eye of the Tiger Challenge

Solution: 

<div class="container mostly-black-bg"> <div class="outer-layer center-x-y"> <div class="circle outer center-x-y mostly-black-bg"> <div class="circle middle center-x-y"> <div class="circle mini mostly-black-bg"></div> </div> </div> </div> </div> <style> * { box-sizing: border-box; padding: 0; margin: 0; } .container { width: 100%; height: 100%; position: relative; } .mostly-black-bg { background: #0B2429 } .center-x-y { display: grid; place-items: center; } .circle { border-radius: 50%; } .outer-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 200px; height: 200px; background: #998235; border-top-right-radius: 100px; border-bottom-left-radius: 100px; } .outer { width: 180px; height: 180px; } .middle { width: 140px; height: 140px; background: #F3AC3C; } .mini { width: 50px; height: 50px; } </style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • use utility classes for shared, reusable CSS properties
  • use display grid to center elements vertically and horizontally

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

Top comments (2)

Collapse
 
stevencrocker profile image
Steven Crocker •

I was able to do it in 262 characters (229 minimized) with a single div element. I have no idea how some people did it in 139!

<div><style> body { background: #0B2429; margin: 50px 100px; } div { width: 200px; height: 200px; rotate: 45deg; border-radius: 50% 0; background: radial-gradient(#0B2429 25px, #F3AC3C 25px, #F3AC3C 70px, #0B2429 70px, #0B2429 90px, #998235 90px); } </style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tadat97tg profile image
tadat97tg •

body{
margin: 0;
background: #0B2429;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 200px;
aspect-ratio: 1;
background: #998235;
transform: rotate(45deg);
border-radius: 50% 0 50% 0;
}
div:before{
content: "";
position: fixed;
top: 30px;
left: 30px;
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
background: #0B2429;
border: 45px solid #F3AC3C;
outline: 20px solid #0B2429;
}