< Back to Frontend Friday Folks Index

Leafy Trail

Highlighted solution (469 characters)
1
<div class="a"></div>
2
<div class="b"></div>
3
<div class="c"></div>
4
<style>
5
  body {background:#0B2429}
6
  .a {background:#1A4341;left: calc(50% - 125px);}
7
  .b {background:#998235;left: calc(50% - 75px);}
8
  .c {background:#F3AC3C;left: calc(50% - 25px);}
9
  div {
10
    position: absolute;
11
    border-radius: calc(200% / 3) 0 calc(200% / 3) 0;
12
    top: calc(50% - 75px);
13
    left: calc(50% - 75px);
14
    height: 150px;
15
    width: 150px;
16
    background: #dd6b4d;
17
  }
18
</style>
19

I took a very straight-forward approach to this, having three divs and let them share most code. border-radius with multiple values allowed me to correctly shape the divs.
< Back to Frontend Friday Folks Index