08/10/2023

<div class="battle-wrapper">
  <div class="circle"></div>
</div>
<style>
  .battle-wrapper {
    position: relative;
    background: #ed6a9d;
    max-width: 400px;
    height: 300px;
  }
  .circle {
    width: 240px;
    height: 240px;
    background: #ed6a9d;
    position: absolute;
    inset: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    outline: 40px #050044 solid;
    outline-offset: -40px;
  }
  .circle:before,
  .circle:after {
    content: "";
    position: absolute;
    background: #ed6a9d;
    width: 40px;
    height: 100%;
    inset: 50%;
    translate: -50% -50%;
  }
  .circle:after {
    rotate: 90deg;
  }
</style>