< Back to Frontend Friday Folks Index

Droplet

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (429 characters)
1 
<div></div>
2 
<style>
3 
  div:after,div:before{
4 
    position:absolute;
5 
    content:'';
6 
    inset:50% -50% -50% 20px;
7 
    border-radius:100px;
8 
    background:radial-gradient(1q,#3210 50px,var(--c,#C36271) 0) var(--x,-110px) -150px;
9 
  }
10 
  div:before{
11 
    inset:-50% 20px 50% -50%;
12 
    --c:#F2E09F;
13 
    --x:110px;
14 
  }
15 
  div {
16 
    position:absolute;
17 
    inset: 0;
18 
    background: linear-gradient(#C36271 150.5px, #F2E09F 0);
19 
  }
20 
</style>

I couldn't make it this Friday, but this puzzle is what was scheduled next.

I thought I'll take two pseudo elements, move them around and at the same time use the main element to do the circle in the middle. The pseudo elements need to keep that space clean (transparent) and fill the rest with their color. This way, the main element can draw the sides and the circle colors, while the pseudo elements could use transparency and border radius to draw the inner circle and the curves.

< Back to Frontend Friday Folks Index