CSS Battle: #12 - Wiggly Moustache

Aug 3, 2022
2 min read
326 words

In this article, I will solve a Wiggly Moustache CSS Challenge on CSS Battle. Let's look at the problem first.

Problem

We need to create the following container by using CSS Properties only: Wiggly Moustache

Solution

So now look at the Solution and how we are going to achieve this.

HTML

index.html

<p l>
<p m>  
<p r>  
<p d>  
  • <p l> : For left Semicircle
  • <p m> : For Center Semicircle
  • <p r> : For Right Semicircle
  • <p d> : For Circular Dots

CSS

Now let's style the containers.

styles.css

body {
  margin: 0;
  background: #f5d6b4;
}
p {
  position: fixed;
}
 
[l], [m], [r] {
  width: 60;
  height: 30;
  border: 20px solid #d86f45;
  border-radius: 0 0 1in 1in;
  border-top: 0;
  bottom: 85;
}
[l] { left: 70 }
[r] { right: 70 }
[m] {
  transform: scaleY(-1);
  bottom: 135;
  left: 150;
}
[d] {
  width: 20;
  height: 20;
  background: #d86f45;
  border-radius: 1in;
  left: 70;
  bottom: 124;
  box-shadow: 240px 0 #d86f45;
}
Tip #1

Note: In CSS Battle you can use 100 instead of 100px. You don't need to define px in CSS. However, if you are using rem or %, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info visit here.

Tip #2

Minify the code or CSS by using any CSS Minifier. It helps you to reduce the characters in the code which will increase the score.

Minified Version:

<p l><p m><p r><p d><style>body{margin:0;background:#F5D6B4}p{position:fixed}[l],[m],[r]{width:60;height:30;border:20px solid #D86F45;border-radius:0 0 1in 1in;border-top:0;bottom:85}[l]{left:70}[r]{right:70}[m]{transform:scaleY(-1);bottom:135;left:150}[d]{width:20;height:20;background:#D86F45;border-radius:1in;left:70;bottom:124;box-shadow:240px 0 #D86F45}

Wrapping up

There are many ways to solve this. You can share your approach in the comments. If you like this then you can extend your support by Buying me a Coffee

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: