CSSBattle | #16 Eye of the Tiger

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:

---

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>

---

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!

Comments

[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>

[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;
}