CSS Battle Daily Target 8-15-2024

<section>
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</section>
<style>
  * {
    box-sizing: border-box;
  }
  body {
    background: #2F5A76;
    color: #F5BB60;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section {
    width: 102px;
    height: 222px;
    position: relative;
    left: -4px;
    top: 2px;
  }
  div {
    position: absolute;
  }
  .middle {
    background: currentcolor;
    width: 90px;
    height: 30px;
    transform: rotate(49.9deg);
    top: 100px;
    left: 10px;
    border-radius: 6px;
  }
  .top, .bottom {
    width: 110px;
    height: 60px;
    border-style: solid;
    border-color: currentcolor;
    border-width: 30px 30px 0;
    border-radius: 100px 100px 0 0;
    transform: rotate(-40deg);
    top: 6px;
    left: -14px;

    &:before {
      content: '';
      display: block;
      border-radius: 100%;
      width: 30.5px;
      height: 30.5px;
      background: currentcolor;
      position: absolute;
      right: -30px;
      top: 9.5px;
    }
  }
  .bottom {
    transform: rotate(140deg);
    top: auto;
    left: auto;
    bottom: 5px;
    right: -16px;
  }
</style>