🎯 CSSBattle September 2 Puzzle – My Solution

I just solved the CSSBattle Sep 2 puzzle and wanted to share my approach.
At first, I tried building the shape using 3 sticks (rectangles), but then I got stuck on how to bend them into curves.

That’s when I realized 👉 overflow: hidden plays a major role in shaping elements!

So instead of bending sticks, I used circles, a rectangle, and overflow hidden to cut out the exact shape I needed.

Here’s my code:

<div class="main">
     <div class="rect">
       <div class="circle">
          <div class="in-circle">
              <div class="stick"></div>
          </div>
      <div> 
     </div>
</div>
<style>
      *{
          background:#5DBCF9;
          box-sizing:border-box;
          margin:0;
          padding:0;
          height:100vh;
      }

    .rect{
        display:flex;
        align-items:center;
        justify-content:center;
        height:180px;
        width:285px;
        overflow:hidden;
    }

    .main{
        display:flex;
        align-items:center;
        justify-content:center;
    }

     .circle{
          background:#FFFFCD;
          width:280px;
          height:330px;
          border-radius:50%;
          display:flex;
          align-items:center;
          justify-content:center;
     }

    .in-circle{
          display:flex;
          background:#5DBCF9;
          width:180px;
          height:240px;
          border-radius:50%;
          align-items:center;
          justify-content:center;
    }

   .stick{
       display:flex;
       width:50px;
       height:250px;
       background:#FFFFCD;
   }
</style>

✅ Learning:

overflow: hidden is super powerful to trim and shape elements without needing complex curves.

Sometimes the simplest trick works better than trying to bend or distort shapes manually.

What do you think about this approach? Would love to hear if you solved it differently! 🚀