CSS Battle #140 – Eclipse

[Narigo]

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 {characters}</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 {characters}

your cssbattles code here!

[Narigo]

Code Source – 647.3 {224}

<style>&{background:
  conic-gradient(#3210 135deg, #1038BF 0 225deg, #3210 0) 0 -24px / 100% 324px,
  radial-gradient(1q,#4F77FF 40px, #3210 0)0 -20px / 100% 100% no-repeat,
  radial-gradient(1q,#FFF 40px, #4F77FF 0)0 -60px

[Arvind644]

Code Source – 606.27 {436}

<div m></div>
<div t></div>
<style>
  body {
    background: #4F77FF;
    display: grid;
    justify-items: center;
    align-content: end;
    margin: 0;
  }
  [m] {
    width: 80;
    height: 80;
    background: radial-gradient(circle at 50% 100%, #4F77FF 40px, #FFF 40px);
    border-radius: 50%;
    position: absolute;
    top: 50px;
  }
  [t] {
    border: 162.5px solid transparent;
    border-bottom-color: #1038BF;
  }
</style>

[missatrox44]

Code Source – 602.71{524}

<div m></div>
<div t></div>
<style>
  body{
    background: #4F77FF;
    display: grid;
    justify-items: center;
    align-content: end;
    margin: 0;
  }
  [m] {
  width: 80;
  height: 80;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50;
  z-index: -1;
}
[m]::after {
  content: "";
  position: absolute;
  width: 80;
  height: 80;
  background: #4F77FF; 
  border-radius: 50%;
  top: 40;
  left: 0;
}
  [t]{
    border: 162.5px solid transparent;
    border-bottom-color: #1038BF;
  }
</style>