006.missing-slice.md

Battle #1 - Pilot Battle

#6 - Missing Slice

Link to problem

My Solution

<div class='cont'>
  <div class='_cont'>
    <div class='q un'></div>
    <div class='q du'></div>
  </div>
  <div class='_cont'>
    <div class='q tr'></div>
    <div class='q qt'></div>
  </div>
</div>
<style>
  body {
    background: #E3516E;
  }
  .cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  ._cont {
    display: flex;
  }
  .q {
    width: 100px;
    height: 100px;
  }
  .un {
    border-radius: 100% 0 0 0;
    background: #51B5A9;
  }
  .du {
    border-radius: 0 100% 0 0;
    background: #FADE8B;
  }
  .tr {
    border-radius: 0 0 0 100%;
    background: #F7F3D7;
  }
  .qt {
    border-radius: 0 0 100% 0;
    background: #E3516E;
  }
</style>