.ribbon {
    width: 150px;
   height: 150px;
   overflow: hidden;
   position: absolute;
     top: 3px;
   right: -6px;
   z-index: 3;
 
}
.ribbon__content {
   left: -30px;
   top: 30px;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   position: absolute;
   display: block;
   width: 250px;
   padding: 10px 0;
   background-color: red;
   box-shadow: 0 0px 10px ;
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.2);
   text-transform: uppercase;
   text-align: center;
   border: 2px dotted #fff;
   outline : 5px solid  #f5cd79;
}

.ribbon::before {
   top: 0;
   left: 0;
   border-top-color: transparent;
   border-right-color: transparent;
   position: absolute;
   z-index: -1;
   content: '';
   display: block;
   /* border: 5px solid #f19066; */
   box-sizing: content-box;

}
.ribbon::after {
   bottom: 0;
   right: 0;
   border-top-color: transparent;
   border-right-color: transparent;
   position: absolute;
   z-index: -1;
   content: '';
   display: block;
   /* border: 5px solid #f19066; */
   
}