Backface is a CSSBattle challenge : https://cssbattle.dev/play/33

Backface.html

<div class="divs">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1A4341;
  }
  .divs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 25px;
  }
  .div1 {
    width: 76px;
    height: 152px;
    border-top-left-radius: 130px;
    border-bottom-left-radius: 130px;
    background: #998235;
  }
  .div1:before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #0B2429;
    position: relative;
    left: 31px;
    top: 31px;
    display: inline-block;
  }
  .div2 {
    width: 100px;
    margin-top: -100px;
    height: 100px;
    border-top-right-radius: 100%;
    background: #F3AC3C;
  }
</style>