04/11/2023

<div class="battle-wrapper">
  <div class="circle"></div>
</div>
<style>
  .battle-wrapper {
    background: #504b72;
    max-width: 400px;
    height: 300px;
    position: relative;
    margin: 0;
  }
  .circle {
    aspect-ratio: 1;
    width: 200px;
    background: #fffbcc;
    position: absolute;
    inset: 50%;
    translate: -50% -50%;
    border-radius: 50%;
  }
  .circle:after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    width: 100px;
    inset: 50%;
    translate: -50% -50%;
    rotate: 45deg;
    background: #504b72;
  }
</style>