CSS Battle #16 – Eye of the Tiger

[aishwarya-mali]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[aishwarya-mali]

using before and after – 601.68 {574}

<p>
<style>
  body{
    background: #0B2429;
    display:grid;
    place-items:center
  }
  p{
    background:#998235;
    height: 200px;
    width: 200px;
    border-radius: 50% 0 50%;
    rotate: 45deg;
    position: relative;
  }
  p::before, p::after{
    content: '';
    position: absolute;
    border-radius: 50%;
  }
  p::after{
    top: 75;
    left: 75;
    width: 50px;
    height: 50px;
    background: #0B2429;
  }
  p::before{
    top: 10;
    left: 10;
    width: 140px;
    height: 140px;
    background: #F3AC3C;
    border: 20px solid #0B2429;
  }
</style>

[meg-gutshall]

First Attempt – 600.44 {715}

<div id="outer-eye" class="flex">
  <div id="inner-eye" class="flex"></div>
</div>
<style>
  #outer-eye {
    width: 200px;
    height: 200px;
    background: #998235;
    transform: rotate(-45deg);
    border-radius: 0 50%;
  }
  #inner-eye {
    width: 50px;
    height: 50px;
    border: 45px #F3AC3C solid;
    box-shadow: 0 0 0 20px #0B2429;
    border-radius: 50%;
    background: #0B2429;
  }
  .flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    width: 400px;
    margin: 0;
    background: #0B2429;
  }
</style>

Second Attempt – 606.33 {435}

<div>
<p>
<style>
  * {
    background: var(--b, #0B2429);
    border-radius: var(--br, 0 50%);
  }
  body, div {
    display: flex;
    place-items: center;
    place-content: center;
  }
  div {
    width: 200;
    height: 200;
    --b: #998235;
    transform: rotate(135deg);
  }
  p {
    width: 50;
    height: 50;
    border: 15vh #F3AC3C solid;
    box-shadow: 0 0 0 5vw #0B2429;
    --br: 50%;
    --b: #0B2429;
  }
</style>

Second Attempt Minified – 627.21 {282}

<div><p><style>*{background:var(--b,#0B2429);border-radius:var(--br,0 50%)}body,div{display:flex;place-items:center;place-content:center}div{width:200;height:200;--b:#998235;rotate:135deg}p{width:50;height:50;border:15vh#F3AC3C solid;box-shadow:0 0 0 5vw#0B2429;--br:50%;--b:#0B2429