CSS Battle #11 – Eye of Sauron

[piotrszymaniec]

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!

[meg-gutshall]

My first solution using grid – 600.29 {729}

<div class=md id=l></div><div id=lg><div id=sm></div></div><div class=md id=r></div>
<style>
  body {
    background: #191210;
    display: grid;
    grid-template: 1fr / 60px 20px 40px 20px 60px;
    place-items: center;
    margin: 0 30px;
  }
  div { border-radius: 100%; }
  #sm {
    position: relative;
    width: 50px;
    height: 50px;
    background: #84271C;
    top: 25;
    left: 25;
  }
  #lg {
    width: 100px;
    height: 100px;
    grid-column: 5;
  }
  .md {
    width: 60px;
    height: 60px;
    rotate: -45deg;
  }
  .md, #lg { border: 20px solid #ECA03D; }
  #l {
    grid-column: 2;
    border-color: #FFFFFF00 #FFFFFF00 #ECA03D #ECA03D;
  }
  #r {
    grid-column: 6;
    border-color: #ECA03D #ECA03D #FFFFFF00 #FFFFFF00;
  }
</style>

Second attempt using flex and relative positioning – 601.15 {614}

<l></l>
<m><div s></div></m>
<r></r>
<style>
  body {
    background: #191210;
    display: flex;
    place-items: center;
    place-content: center;
  }
  * {
    border-radius: 50%;
    position: relative;
  }
  l, r {
    width: 60px;
    height: 60px;
    border: 20px solid;
    border-color: #FFFFFF00 #FFFFFF00 #ECA03D #ECA03D;
  }
  l {
    left: 20;
    rotate: -45deg;
  }
  r {
    left: -20;
    rotate: 135deg;
  }
  m {
    width: 100px;
    height: 100px;
    border: 20px solid #ECA03D;
  }
  [s] {
    width: 50px;
    height: 50px;
    background: #84271C;
    left: 25;
    top: 25;
  }
</style>

Second attempt using flex and relative positioning (minified) – 609.18 {396}

<l></l><m><div s></div></m><r></r><style>body{background:#191210;display:flex;place-items:center;place-content:center}*{border-radius:50%;position:relative}l,r{width:60;height:60;border:20px solid;border-color:#FFFFFF00#FFFFFF00#ECA03D#ECA03D}l{left:20;rotate:-45deg}r{left:-20;rotate:135deg}m{width:100;height:100;border:20px solid#ECA03D}[s]{width:50;height:50;background:#84271C;left:25;top:25

[piotrszymaniec]

first try – 600.11 {860}

your cssbattle code here!

[danieltott]

Here's my solution from a while ago:

Minified – 629.09 {275}

<p a b><p><p a><style>body{display:flex;margin:84 50;background:#191210}p{width:50;height:50;background:#84271C;border-radius:25vw;outline:5vw solid#ECA03D;border:solid 25px#191210}[b]{scale:1 -1}[a]{width:0;height:0;margin:36 20;border-width:30;clip-path:inset(-50% -33% 50%

[danieltott]

Here it is expanded:

Code Source – 607.1 {423}

<p a b></p>
<p></p>
<p a></p>
<style>
  body {
    display: flex;
    margin: 84 50;
    background: #191210;
  }
  p {
    width: 50;
    height: 50;
    background: #84271c;
    border-radius: 25vw;
    outline: 5vw solid#ECA03D;
    border: solid 25px#191210;
  }
  [b] {
    scale: 1 -1;
  }
  [a] {
    width: 0;
    height: 0;
    margin: 36 20;
    border-width: 30;
    clip-path: inset(-50% -33% 50%);
  }
</style>

[aishwarya-mali]

using positions, before & after – 600.25 {773}

<div><p></p></div>
<style>
  body{
    background: #191210;
    display: grid;
    place-items: center;
  }
  div {
    width: 100px;
    height: 100px;
    border: 20px solid #ECA03D;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
  }
  div::before,div::after{
    content: '';
    width: 60px;
    height: 30px;
    position: absolute;
    border: 20px solid #ECA03D;
    border-top: 0;
  }
  div::before{
    top: 50px;
    right: 100px;
    border-radius: 0 0 110px 110px;
  }
  div::after{
    top: 0px;
    left: 100px;
    border-radius: 0 0 120px 120px; 
    transform: scaleY(-1);
    backface-visibility: hidden;
  }
  p{
    width: 50px;
    height: 50px;
    background: #84271C;
    border-radius: 50%;
  }
</style>

[funbunch]

1st Try – 596.44 {880}

<div></div><p></p>
<style>
  body{
    background:#191210;
    display:grid;
    place-items:center;
  }
  div {
    border-radius:50%;
    border:15px solid #191210;
    width:50px;
    height:50px;
    position:relatve;
    background:#84271C;
    z-index:100;
  }
  div::after {
    content:'';
    border:20px solid #ECA03D;
    position:absolute;
    top:80px;
    left:130px;
    width:100px;
    height:100px;
    border-radius:50%;
  }
  p {
    position:absolute;
    width:60px;
    height:30px;
    top:135px;
    border:20px solid #ECA03D;
    border-bottom:0;
    left:50px;
    rotate:180deg;
    border-radius:120px 120px 0 0;
  }
  p::after {
    content:'';
    position:absolute;
    width:60px;
    height:30px;
    top:30px;
    border:20px solid #ECA03D;
    border-bottom:0;
    right:180px;
    rotate:180deg;
    border-radius:120px 120px 0 0;
  }
</style>

/details>