<div class=left>
  <div class=left-circle></div>
</div>
<div class=right>
<div class=right-circle></div>
</div>

<style>
  body {
    display:flex;
    justify-content:center;
    align-items:center;
    background: #62306D;
  }

  .left{
    width:100px;
    height:150px;
    border-radius:50px 50px 50px 50px;
    background:#AA445F;
    position:relative;
    left:5;
    top:-25;
  }

  .left-circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#F7EC7D;
    bottom:0;
    position:absolute;
  }
  .right{
    width:100px;
    height:150px;
    border-radius:50px 50px 50px 50px;
    background:#E38F66;
    position:relative;
    right:5;
    bottom:-25;
    margin-left:50px;
  }

  .right-circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#F7EC7D;
    top:0;
    position:absolute;
  }
</style>