# CSS Battle: #12 - Wiggly Moustache



In this article, I will solve a [Wiggly Moustache](https://cssbattle.dev/play/12) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Wiggly Moustache](https://cssbattle.dev/targets/12.png)

## Solution

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

%[https://youtu.be/aPAFEA5QQ9c]

### HTML


```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. 

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

>*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](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). 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 don't forget to ❤️ it. And I'll see you in the next article. See you soon.