< 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