< 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