< Back to Frontend Friday Folks Index

Acid Rain

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