CSS Battle #115 – Droplet

[meg-gutshall]

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!

[meg-gutshall]

First Attempt – 603.25 {505}

<div y></div>
<div r></div>
<div c></div>
<style>
  * {
    background: linear-gradient(to left, #C36271 50%, #F2E09F 0);
    margin: 0;
    position: relative;
  }
  div {
    width: 360px;
    height: 360px;
    border-radius: 100px;
  }
  [c] {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    rotate: -90deg;
    top: -620;
    left: 150;
  }
  [y] {
    background: #F2E09F;
    top: -210;
    left: 20;
  }
  [r] {
    background: #C36271;
    top: -210;
    left: 20;
  }
</style>

Second Attempt – 606.04 {440}

<p y>
<p r>
<div>
<style>
  * {
    background: linear-gradient(to left, #C36271 50%, #F2E09F 0);
    margin: 0;
    position: relative;
  }
  p {
    width: 360;
    height: 360;
    border-radius: 25vw;
    top: -210;
    left: 20;
  }
  div {
    width: 100;
    height: 100;
    border-radius: 50%;
    top: -620;
    left: 150;
    rotate: -90deg;
  }
  [y] {
    background: #F2E09F;
  }
  [r] {
    background: #C36271;
  }
</style>

Second Attempt (Minified) – 625.7 {288}

<p y><p r><div><style>*{background:linear-gradient(to left,#C36271 50%,#F2E09F 0);margin:0;position:relative}p{width:360;height:360;border-radius:25vw;top:-210;left:20}div{width:100;height:100;border-radius:50%;top:-620;left:150;rotate:-90deg}[y]{background:#F2E09F}[r]{background:#C36271

[Arvind644]

Code Source – 600.65 {674}

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<style>
  body {
    background: linear-gradient(to right, #F2E09F 50%, #C36271 50%);
    margin: 0;
    display: grid;
    place-items: center;
  }
   div {
    width: 360px;
    height: 150px;
    background: #F2E09F;
    border-radius: 0 0 100px;
  }
   #left {
    width: 360px;
    height: 150px;
    background: #F2E09F;
    border-radius: 0 0 100px;
  }
 #center {
    width: 100px;
    height: 100px;
    z-index: 1;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(#C36271 50%, #F2E09F 50%);
  }
  #right {
    background: #C36271;
    rotate: 180deg;
  }
</style>

[Narigo]

Code Source – 606.7 {429}

<div></div>
<style>
  div:after,div:before{
    position:absolute;
    content:'';
    inset:50% -50% -50% 20px;
    border-radius:100px;
    background:radial-gradient(1q,#3210 50px,var(--c,#C36271) 0) var(--x,-110px) -150px;
  }
  div:before{
    inset:-50% 20px 50% -50%;
    --c:#F2E09F;
    --x:110px;
  }
  div {
    position:absolute;
    inset: 0;
    background: linear-gradient(#C36271 150.5px, #F2E09F 0);
  }
</style>