CSSBattle | #12 Wiggly Moustache

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #12 Wiggly Moustache 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">
  <div class="wiggle left">
    <div class="circular-dot"></div>
  </div>
  <div class="wiggle middle">
  </div>
  <div class="wiggle right">
    <div class="circular-dot"></div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #F5D6B4;
    position: relative;
  }
  .wiggle {
    width: 100px;
    height: 50px;
    border: 20px solid #D86F45;
    position: absolute;
    top: 50%;
    left: 50%;    
  }
  .left, .right {
    border-bottom-left-radius: 100px;    
    border-bottom-right-radius: 100px;
    border-top: 0;
  }
  .left {
   transform: translate(calc(-50% + -80px), calc(-50% + 25px));
  }
  .middle {
    border-top-left-radius: 100px;    
    border-top-right-radius: 100px;
    border-bottom: 0;
    transform: translate(-50%, calc(-50% + -25px));
  }
  .right {
   transform: translate(calc(-50% + 80px), calc(-50% + 25px));
  }
  .circular-dot {
    background: #D86F45;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
  }
  .left .circular-dot {
    left: 0;
    transform: translate(calc(-50% + -10px), -50%);
  }
  .right .circular-dot {
    right: 0;
    transform: translate(calc(-50% + 30px), -50%);
  }
</style>

---

Key Takeaway(s):

• focus on creating the wiggle first using border-radius properties
• replicate the same wiggle 2 more times and change their positions using transform properties

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