CSS Battle #6 – Missing Slice

[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 borders

<div></div>
<style>
  body {
    background: #E3516E;
    display: grid;
    place-items: center;
  }
  div{
    border-radius: 50%;
    border: 100px solid transparent;
    border-top-color: #FADE8B;
    border-left-color: #51B5A9;
    border-bottom-color: #F7F3D7;
    transform: rotate(45deg);
  }
</style>

[Narigo]

Oh I like this solution!

[meg-gutshall]

Yes, me too!

[danieltott]

YES! Great minds! 😁

[rmirville]

I wrote text until shapes happened (391 characters)

<div id="c"><p></p><p id="y"></p><p id="w"></p></div>
<style>
  body {
    background: #E3516E;
    padding: 42px 92px;
  }
  p {
    width: 100px;
    height: 100px;
    margin: 0;
    background: #51B5A9;
  }
  #c {
    display: grid;
    grid-template-columns: 1fr 1fr;
    clip-path: circle(50% at 50%)
  }
  #y {
    background: #FADE8B;
  }
  #w {
    background: #F7F3D7;
  }
</style>

[Narigo]

clip-path!

[meg-gutshall]

My first attempt using conic-gradient – 628.54 {277}

<div></div>
<style>
  body {
    background: #E3516E;
    display: grid;
    place-items: center;
  }
  div {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: conic-gradient(#FADE8B 0 25%, #E3516E 25% 50%, #F7F3D7 50% 75%, #51B5A9 0);
  }
</style>

And then I realized, I could probably do this without a div! – 666.03 {189}

<style>
  body {
    background: 
      radial-gradient(circle, transparent 100px, #E3516E 0),
      conic-gradient(#FADE8B 0 25%, #E3516E 25% 50%, #F7F3D7 50% 75%, #51B5A9 0);
  }
</style>

[Narigo]

Oh, percentages make so much sense for conic gradients!

[danieltott]

Yesssss percentages!!! 🤦🏼 🤦🏼 🤦🏼

[AmyShackles]

Using conic-gradient

Score	Character count
636.57	251

<div></div>
<style>
  * {
    background: #E3516E;
  }
  div {
    margin: 13% auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(#FADE8B 25%, #E3516E 25% 50%, #F7F3D7 50% 75%, #51B5A9 25% );
    border-radius: 50%;
  }
</style>

[Narigo]

Gradients without elements! 132 chars thanks to looking at @meg-gutshall solution with percentages 😅

<style>*{background:radial-gradient(circle,#0000 100px,#E3516E 0),conic-gradient(#FADE8B 25%,#E3516E 0 50%, #F7F3D7 0 75%,#51B5A9 0)

[Narigo]

Replacing 100px with 42% reduced to 130 chars and still at 100%.

A bit different, but not much, still 130chars

<style>*{background:#E3516E}*>*{background:conic-gradient(#FADE8B 25%,#0000 0 50%, #F7F3D7 0 75%,#51B5A9 0);clip-path:circle(106q)

[danieltott]

Pop a couple more characters off!

718.1 {128}

<style>*{background:#E3516E}*>*{background:conic-gradient(#FADE8B 25%,#0000 0 50%,#F7F3D7 0 75%,#51B5A9 0);clip-path:circle(106q

[Narigo]

Ouch, I didn't know about the last one but that space was definitely an oversight 😅

[danieltott]

Teamwork!!

[Narigo]

Nesting to shave off 2 more chars! – 720.37 {126}

<style>*{background:#E3516E;*{background:conic-gradient(#FADE8B 25%,#0000 0 50%,#F7F3D7 0 75%,#51B5A9 0);clip-path:circle(25vw

[danieltott]

My first pass (haven't looked at anyone else's yet!)

Unminified for viewing using `conic-gradient`:

<style>
  *{
    background: #E3516E;
  }
  *>*{
    background:conic-gradient(#FADE8B 0 90deg,#0000 90deg 180deg,#F7F3D7 180deg 270deg,#51B5A9 270deg);
    border-radius:50%;
    margin:50 100
  }

Minified: 687.89 (159 chars):

<style>*{background:#E3516E}*>*{border-radius:50%;margin:50 100;background:conic-gradient(#FADE8B 90deg,#0000 90deg 180deg,#F7F3D7 180deg 270deg,#51B5A9 270deg

[danieltott]

Turns out I had done this one a while ago - here's my solution that time - border color and rotate():

Minified: 707.36 {138 chars}:

<style>*{background:#E3516E}*>*{border:25vw solid;border-color:#51B5A9 #FADE8B #0000 #F7F3D7;margin:50 100;border-radius:50%;rotate:-45deg

[david-001]

Code Source – score 611.99 {368 chars}

<div></div>
<style>
  body{
    margin: 0;
    background-color:#E3516E;
    display: grid;
    place-items: center;
    height: 100vh;
  }
  div {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: conic-gradient(from -90deg at 50% 50%, #51B5A9 90deg, #FADE8B 90deg, #FADE8B 180deg, #E3516E 180deg, #E3516E 270deg, #F7F3D7 0);
  }
</style>