Wrapped ribbon on product images

Using CSS we can display wrapped ribbon type badge on the product images.

<div class="facets-item-cell-grid">
 <div class="ribbon ribbon-top-left"><span>On Sale</span></div>
</div>


CSS

.facets-item-cell-grid {
    position: relative;
}

.ribbon-top-left {
    top: -10px;
    left: -10px;
}


.facets-item-cell-table .ribbon-top-left {
    left: -15px;
}


.facets-item-cell-grid .ribbon-top-left {
    left: -13px;
}


.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}


.ribbon-top-left::before {
    top: 0;
    right: 14px;
}
.ribbon-top-left::after {
    bottom: 14px;
    left: 0;

}
.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
    padding-right: 20px;
}