29/10/2023

<div class="battle-wrapper">
  <div class="base">
    <div class="notch"></div>
    <div class="notch"></div>
    <div class="notch"></div>
    <div class="notch"></div>
  </div>
</div>
<style>
  :root {
    --size: 20px;
  }
  .battle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    max-width: 400px;
    height: 300px;
    background: #872626;
  }
  .base {
    position: relative;
    width: 170px;
    height: 170px;
    background: #e3745d;
    border-radius: 50%;
  }
  .base:before,
  .base:after {
    content: "";
    width: calc(100% - (var(--size) * 2));
    height: calc(100% - (var(--size) * 2));
    background: #872626;
    border-radius: 50%;
    position: absolute;
    left: var(--size);
    top: var(--size);
  }
  .base:after {
    width: 50px;
    height: 50px;
    background: #e3745d;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .notch {
    background: #e3745d;
    height: var(--size);
    width: calc(var(--size) * 3);
    position: absolute;
    border-radius: 10px;
  }
  .notch:nth-child(1) {
    transform: translateX(-50%) rotate(90deg);
    left: 50%;
  }
  .notch:nth-child(2) {
    right: calc(var(--size) * -1);
    top: 50%;
    transform: translateY(-50%);
  }
  .notch:nth-child(3) {
    transform: translateX(-50%) rotate(90deg);
    left: 50%;
    bottom: 0;
  }
  .notch:nth-child(4) {
    top: 50%;
    transform: translateY(-50%);
    left: calc(var(--size) * -1);
  }
</style>