.sale {
    position: relative;
    display: inline-block;
    float: right;
    background: #3cd4c5;
    color: white;
    font-weight: 700;
    height: 3rem;
    width: 3rem;
    text-align: center;
    vertical-align: middle;
    line-height: 2.5rem;
    margin: 5px 5px;
    -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
    -webkit-animation: beat 1s ease infinite alternate;
          animation: beat 1s ease infinite alternate;
}
.sale:before, .sale:after {
    content: "";
    position: absolute;
    background: inherit;
    height: inherit;
    width: inherit;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sale:after {
    -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

@-webkit-keyframes beat {
  from {
    -webkit-transform: rotate(-20deg) scale(1);
            transform: rotate(-20deg) scale(1);
  }
  to {
    -webkit-transform: rotate(-20deg) scale(1.1);
            transform: rotate(-20deg) scale(1.1);
  }
}

@keyframes beat {
  from {
    -webkit-transform: rotate(-20deg) scale(1);
            transform: rotate(-20deg) scale(1);
  }
  to {
    -webkit-transform: rotate(-20deg) scale(1.1);
            transform: rotate(-20deg) scale(1.1);
  }
}

@media (max-width: 768px) and (min-width: 0px){
    .sale {
        font-size: 11px;
    }
}