30/10/2023

<div class="battle-wrapper">
  <div class="cone">
    <div class="line"></div>
  </div>
</div>
<style>
  :root {
    --radius: 100px;
    --block-size: 30px;
    --base-cone-width: 280px;
    --base-cone-height: 180px;
  }
  .battle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    max-width: 400px;
    height: 300px;
    background: #f58220;
  }
  .cone {
    width: var(--base-cone-width);
    height: var(--base-cone-height);
    background: #fff;
    border-radius: var(--radius);
    position: relative;
    display: flex;
    justify-content: center;
  }
  .cone:before,
  .cone:after {
    content: "";
    position: absolute;
    border-radius: var(--radius);
  }
  .cone:before {
    width: calc(var(--base-cone-width) - (var(--block-size) * 2));
    height: calc(var(--base-cone-height) - (var(--block-size) * 2));
    background: #f58220;
    top: var(--block-size);
    left: var(--block-size);
  }
  .cone:after {
    width: calc(var(--base-cone-width) - (var(--block-size) * 4));
    height: calc(var(--base-cone-height) - (var(--block-size) * 4));
    top: calc(var(--block-size) * 2);
    left: calc(var(--block-size) * 2);
    background: #fff;
  }
  .line {
    position: relative;
    width: var(--block-size);
    height: 100%;
    background: #fff;
  }
  .line:before,
  .line:after {
    content: "";
    position: absolute;
    width: var(--block-size);
    height: var(--block-size);
    background: #f58220;
  }
  .line:after {
    bottom: 0;
  }
</style>