# CSS Battle: #16 - Eye of the Tiger



In this article, I will solve a [Eye of the Tiger](https://cssbattle.dev/play/16) 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:
![Eye of the Tiger](https://cssbattle.dev/targets/16.png)

## Solution

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


### HTML

```html
<p c>
<p l>
<p r> 
```

- `<p c>` : Center Circle
- `<p l>` : Left Triangle
- `<p r>` : Right Triangle


### CSS


```css
* {
  margin: 0;
  background: #0b2429;
}

body {
  display: grid;
  place-items: center;
}

p { position: absolute }

[c] {
  width: 50;
  height: 50;
  border-radius: 1in;
  border: 45px solid #f3ac3c;
  box-shadow: 0 0 0 20px #0b2429, 
              0 0 0 30px #998235;
  z-index: 1;
}

[l], [r] {
  height: 160;
  width: 82;
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
  background: #998235;
}

[l] { left: 58 }

[r] {
  right: 57;
  transform: scalex(-1);
}

```


><small>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)</small>

><small>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.</small>

**Minified Version:**
```
<p c><p l><p r><style>*{margin:0;background:#0B2429}body{display:grid;place-items:center}p{position:absolute}[c]{width:50;height:50;border-radius:1in;border:45px solid #F3AC3C;box-shadow:0 0 0 20px #0B2429,0 0 0 30px #998235;z-index:1}[l],[r]{height:160;width:82;clip-path:polygon(0 50%,100% 100%,100% 0);background:#998235}[l]{left:58}[r]{right:57;transform:scalex(-1)}
```

%[https://twitter.com/j471n_/status/1593888944537890816]

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