< 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.
Highlighted solution (365 characters)
1 
<div>
2 
  <hr/>
3 
  <hr/>
4 
  <hr a b/>
5 
  <hr/>
6 
  <hr/>
7 
  <hr/>
8 
  <hr a/>
9 
  <hr/>
10 
  <hr a/>
11 
  <hr/>
12 
</div>
13 
<style>
14 
  body{background:#62306D;margin:25 -50}
15 
  div {
16 
    display:grid;
17 
    grid-template-columns:repeat(5,100px);
18 
    gap:0;
19 
  }
20 
  hr{width:100;height:100;border:0}
21 
  [a]{background:#F7EC7D;border-radius:0 0 50%50%}
22 
  [b]{rotate:180deg;margin:25+0-8}
23 
</style>
24
Ok, the latest solution was using existing elements in a grid.
< Back to Frontend Friday Folks Index