01/11/2023

<div class="battle-wrapper">
  <div class="box">
    <div class="row"></div>
    <div class="row row--large"></div>
    <div class="row"></div>
  </div>
</div>
<style>
  :root {
    --box-size: 210px;
    --row-size: calc(var(--box-size) / 4);
  }
  .battle-wrapper {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    height: 300px;
    background: #813131;
  }
  .box {
    width: var(--box-size);
    height: var(--box-size);
  }
  .row {
    height: var(--row-size);
    background: linear-gradient(
      to right,
      #fffcdf 25%,
      #813131 25% 75%,
      #fffcdf 75%
    );
  }
  .row--large {
    height: calc(var(--row-size) * 2);
    background: linear-gradient(
      to right,
      #813131 25%,
      #fffcdf 25% 75%,
      #813131 75%
    );
    position: relative;
  }
  .row--large:after {
    content: "";
    position: absolute;
    width: var(--row-size);
    height: var(--row-size);
    background: #813131;
    top: calc(var(--row-size) / 2);
    left: 50%;
    transform: translateX(-50%);
  }
</style>