CSS Battle #103

Battle: #103

<div class="l">
  <div class="h2"></div>
  <div class="face"></div>
  <div class="h1"></div>
</div>
<div class="l r">
  <div class="h2"></div>
  <div class="face f2"></div>
  <div class="h1"></div>
</div>
<div class="mouth"></div>
<div class="mid"></div>
<style>
  body {
    margin: 0;
    background: #161616;
  }
  div {
    position: absolute;
  }
  .l {
    width: 50%;
    height: 100%;
    overflow: hidden;
  }
  .face {
    right: 0;
    width: 40px;
    height: 60px;
    background: #ffffff;
    bottom: 84px;
    border-radius: 0 0 0 50px;
  }
  .mouth {
    z-index: 9;
    bottom: 94px;
    background: #161616;
    width: 20px;
    height: 10px;
    border-radius: 0 0 20px 20px;
    transform: translateX(-50%);
    left: 50%;
  }
  .mid {
    transform: translateX(-50%) rotate(45deg);
    left: 50%;
    width: 60px;
    height: 60px;
    background: #ebae11;
    border-radius: 0 60px 0 60px;
    top: 96px;
  }
  .h1 {
    width: 59px;
    height: 30px;
    background: #ebae11;
    border-radius: 0 0 60px 60px;
    transform: rotate(61deg);
    top: 134px;
    right: -1px;
  }
  .h2 {
    width: 60px;
    height: 30px;
    background: #ebae11;
    border-radius: 0 0 60px 60px;
    transform: rotate(15deg);
    top: 160px;
    right: 3px;
  }
  .r {
    transform: scaleX(-1);
    right: 0;
  }
  .f2 {
    background: #ffdeb9;
  }
</style>