03/11/2023

<div class="battle-wrapper">
  <div class="wrapper">
    <div class="half left"></div>
    <div class="half right"></div>
  </div>
</div>
<style>
  .battle-wrapper {
    background: #8c80bb;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper {
    display: flex;
    justify-content: space-between;
    width: 230px;
    position: relative;
  }
  .wrapper:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fcdfeb;
    top: 110px;
    left: 50%;
    translate: -50%;
    border-radius: 50%;
  }
  .half {
    width: 100px;
    height: 100px;
    background: #fcdfeb;
  }
  .left {
    border-radius: 100% 0 20px;
  }
  .right {
    border-radius: 0 100% 0 20px;
  }
</style>