02/11/2023

<div class="battle-wrapper">
  <div class="diamond">
    <div class="half"></div>
    <div class="half"></div>
  </div>
</div>
<style>
  :root {
    --height: 150px;
  }
  .battle-wrapper {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    height: 300px;
    background: #cbc35c;
  }
  .diamond {
    width: 250px;
    height: var(--height);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .half {
    height: calc(var(--height) / 2);
  }
  .half:first-child {
    background: linear-gradient(to right, #fffac2 50%, #12703d 50%);
  }
  .half:last-child {
    background: linear-gradient(to right, #cf464a 50%, #1d1714 50%);
  }
</style>