< Back to Frontend Friday Folks Index

Ups n Downs

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

In my first solution I used regular positioning and thought the left-bottom and middle one were of similar shape.
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

The second time I solved this, I was looking into ways how to mirror this. I wanted to use -webkit-box-reflect but it looks like it can only mirror on the X or the Y axis - not both at the same time. So I resorted to the scale(-1) trick. For this to work, the boxes needed to be duplicated.
< Back to Frontend Friday Folks Index