DEV Community

Cover image for CSS Battle #12 - Wiggly Moustache
Olzhas Askar
Olzhas Askar

Posted on

12 5

CSS Battle #12 - Wiggly Moustache

When it comes to CSS, I'm still back in the 00s. Have you seen Stack Overflow on the 1st of April? Or do you remember MySpace? Glitter and poisonous colors? Well, that is my level. I'd be even using <blink></blink> were I that old. So, when I discovered CSS Battle, I thought I should take it beyond the battle.
I should have fundamentally got better at CSS. Bootstrap based pages were published. New JS frameworks appeared.
But I didn't. Yet.

1. Initial Solution

This is how I've made the last battle to the 100% point. The main idea here is using pseudo classes to make rounded ends.

<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  body{
    background: #F5D6B4;
    margin: 0;
    position: relative;
  }
  #l, #r, #c{
    width: 60px;
    height: 30px;
    border: 20px solid #D86F45;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #l, #r{
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top: 0;
  }
  #l{
    margin: 0 0 0 -130px;
  }
  #r{
    margin: 0 0 0 30px;
  }
  #c{
    margin: -50px 0 0 -50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom: 0;
  }
  #l:before, #r:after{
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    background: #D86F45;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    top: -10px;
  }
  #l:before{
    left: -20px;
  }
  #r:after{
    left: 60px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

2. Borders

Let's unify all borders to be single border-radius with four values.

border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Enter fullscreen mode Exit fullscreen mode

This becomes a single value.

border-radius: 0 0 50px 50px;
Enter fullscreen mode Exit fullscreen mode

3. Positioning

We can position everyhing as fixed, remove top and left properties which had 50% and replace them with more precise margins.

<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  *{
    background: #F5D6B4;
    position: fixed;
  }
  #l, #r, #c{
    width: 60px;
    height: 30px;
    border: 20px solid #D86F45;
  }
  #l, #r{
    border-radius: 0 0 50px 50px;
    border-top: 0;
  }
  #l{
    margin: 142px 0 0 62px;
  }
  #r{
    margin: 142px 0 0 222px;
  }
  #c{
    margin: 92px 0 0 142px;
    border-radius: 50px 50px 0 0;
    border-bottom: 0;
  }
  #l:before, #r:after{
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    background: #D86F45;
    border-radius: 20px 20px 0 0;
    top: -10px;
  }
  #l:before{
    left: -20px;
  }
  #r:after{
    left: 60px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

At this point I can probably leave it for you. You know what to do. I hope you enjoyed as I did. I learned a ton of CSS, which I am using in daily work. The whole point was learn together. And since the content I've found online usually only scratches the surface, I decided to contribute myself.
When it comes to the competitive part of it, you can ask others, lint your code and minify it. But I'd rather recommend to watch a positioning tutorial. And of course, never forget - less is more.

And this is it.
Currently I am 72nd out 21780 people who played the game. I solved 37 out 44 battles. My handle is @pheeria.
See you later, I guess?

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
dpaine20 profile image
David Paine20

I love the line that you said, "The whole point was to learn together"
The battles show your hard work. Best of luck with your future work.
I think, you must check that link url-decode.com/cat/ that link has several tools, that might help you.
Regards

Collapse
 
daya_shankar profile image
Daya Shankar

Hi. Here is my solution with 444 characters.


<p a><p b><p>
        <style>* {
          zoom: 2;
          background: #f5d6b4;
          }
          p {
              display: inline-block;
              width: 7.5;
              height: 4;
              margin: 14.5 -1.25;
              border: 2.5px solid #d86f45;
              border-top-color: #f5d6b4;
              border-top-width: 0;
              border-radius: 0 0 50px 50px;
          }
          p[a] {
              margin-left: 4.7;
          }
          p[b] {
              position: relative;
              top: -6;
              transform: rotate(180deg);
          }
          p[b]:after,
          p[b]:before {
              content: "";
              position: absolute;
              width: 2.5;
              height: 1.5;
              background: #d86f45;
              left: 17.5;
              top: -0.1;
              border-radius: 0 0 5px 5px;
          }
          p[b]:after {
              left: -12.5;
          }

Enter fullscreen mode Exit fullscreen mode

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay