Как реализовать?

.wide-block {
  height: 468px;
  background-color: #f4f4f4;
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  z-index: -3;
  &__discount {
    position: relative;
    background-color: #cdcdcd;
    width: 511.77px;
    height: 275.91px;
    margin: 111px auto 80px;
    border-radius: 5px;
    i {
      font-size: 2.4em;
      position: absolute;
      top: 50%;
      transform: translate(50%, -50%);
      cursor: pointer;
      right: 0;
      color: $color-main;
      background-color: #fff;
      padding: 1em;
      border-radius: 50%;
      box-shadow: 0px 4px 4px rgba(174, 174, 174, 0.25);
    }
    img {
      filter: drop-shadow(0px 4px 40px #d9d9d9);
      position: absolute;
    }
    .star {
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      &-top {
        height: 26.5em;
        width: 26.5em;
        bottom: 11em;
        left: -9em;
        z-index: -1;
      }
      &-bottom {
        width: 17.9em;
        height: 17.9em;
        transform: rotate(-40deg);
        bottom: -7em;
        right: -6em;
        z-index: -2;
      }
    }
    .star-mini-top {
      bottom: 9em;
      left: -10em;
      z-index: -1;
    }
    .star-mini-bottom {
      transform: rotate(-26.53deg);
      bottom: -8em;
      right: -7em;
      height: 20em;
    }
  }
}

<div class="wide-block">
  <div class="wide-block__discount">
    <div class="star star-top"></div>
    <div class="star star-bottom"></div>
    <img class="star-mini-top" src="images/discount.png" alt="">
    <img class="star-mini-bottom" src="images/discount.png" alt="">
    <i class="fa fa-arrow-right" aria-hidden="true"></i>
  </div>
</div>