< Back to Frontend Friday Folks Index

Acid Rain

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 (467 characters)
1 
<div class="c r"></div>
2 
<div class="d m"></div>
3 
<div class="d l"></div>
4 
<style>
5 
  body {margin:0;background:#0B2429;}
6 
  div {
7 
    position: absolute;
8 
    width: 120px;
9 
    height: 120px;
10 
    background: #F3AC3C;
11 
    border-radius: 50%;
12 
  }
13 
  .m {
14 
    background: #998235;
15 
    top: 50%;
16 
    left: 50%;
17 
    translate: -50% -50%;
18 
  }
19 
  .c {
20 
    bottom: 50%;
21 
    left: 50%;
22 
  }
23 
  .d {
24 
    border-top-right-radius: 0;
25 
  }
26 
  .l {
27 
    top: 50%;
28 
    right: 50%;
29 
  }
30 
</style>
31
It looks like I've done this puzzle multiple times. This is the first solution available to me in CSSBattle.dev.
Highlighted solution (584 characters)
1 
<div></div>
2 
<div id=b></div>
3 
<style>
4 
  body {background: #0B2429;display: grid;place-items:center;}
5 
  #b {
6 
    position: absolute;
7 
    transform: scale(-1);
8 
    z-index: -1;
9 
  }
10 
  div {
11 
    background: #F3AC3C;
12 
    border-radius: 50% 0 50% 50%;
13 
    position: relative;
14 
    height: 120px;
15 
    width: 120px;
16 
  }
17 
  div:before,div:after {
18 
    border-radius: 50% 0;
19 
    content: '';
20 
    inset: 0;
21 
    position: absolute;
22 
  }
23 
  div:before {
24 
    background: #998235;
25 
  }
26 
  div:after {
27 
    background: #F3AC3C;
28 
    inset: 60px 60px -60px -60px;
29 
    border-radius: 50% 0 50% 50%;
30 
  }
31 
</style>
32
This is the second solution, half a year later. Is it better or worse now...? Since it's been half a year already, I should maybe do it a third time...
< Back to Frontend Friday Folks Index