<div class="products">
 
    <ul>
        <!-- Product block LI start here-->
        <li>
            <!-- Product Image-->
            <figure><img src="https://images.pexels.com/photos/667838/pexels-photo-667838.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product01"></figure>
            <!-- Badge overlay DIV -->
            <div class="badge-overlay">
                <!-- Change Badge Position, Color, Text here-->
                <span class="top-left badge orange">Sale 50% Off</span>
            </div>
        </li>
        <!-- Product block LI end here-->

        <li>
            <figure><img src="https://images.pexels.com/photos/1090638/pexels-photo-1090638.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product02"></figure>
            <div class="badge-overlay">
                <span class="top-right badge red">Sale</span>
            </div>
        </li>
        <li>
            <figure><img src="https://images.pexels.com/photos/707581/pexels-photo-707581.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product03"></figure>
            <div class="badge-overlay">
                <span class="bottom-left badge blue">Sale 50% Off</span>
            </div>
        </li>
        <li>
            <figure><img src="https://images.pexels.com/photos/259580/pexels-photo-259580.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product04"></figure>
            <div class="badge-overlay">
                <span class="bottom-right badge pink">75% OFF</span>
            </div>
        </li>
        <li>
            <figure><img src="https://images.pexels.com/photos/1267857/pexels-photo-1267857.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product07"></figure>
            <div class="badge-overlay">
                <span class="top-full badge green">SALE 75% OFF</span>
            </div>
        </li>
        <li>
            <figure><img src="https://images.pexels.com/photos/276528/pexels-photo-276528.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product07"></figure>
            <div class="badge-overlay">
                <span class="middle-full badge red">SALE 75% OFF</span>
            </div>
        </li>
        <li>
            <figure><img src="https://images.pexels.com/photos/776538/pexels-photo-776538.jpeg?auto=compress&cs=tinysrgb&h=350" alt="product07"></figure>
            <div class="badge-overlay">
                <span class="bottom-full badge orange">SALE 75% OFF</span>
            </div>
        </li>
    </ul>
</div>

*, html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
figure { margin:0px;}
img {max-width:100%;}
/* ================== Badge Products CSS ========================*/

.products {
    max-width: 100%;
    margin: 0 auto;
}

.products ul {
    margin: 0px;
    text-align: center;
}

.products ul li {
    width: 320px;
    height: 213px;
    background: #f8f8f8;
    display: inline-block;
    position: relative;
    margin: 15px;
    padding: 0px;
    box-sizing: border-box;
}

/* ================== Badge Overlay CSS ========================*/
.badge-overlay {
    position: absolute;
    left: 0%;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
    -webkit-transition: width 1s ease, height 1s ease;
    -moz-transition: width 1s ease, height 1s ease;
    -o-transition: width 1s ease, height 1s ease;
    transition: width 0.4s ease, height 0.4s ease
}

/* ================== Badge CSS ========================*/
.badge {
    margin: 0;
    padding: 0;
    color: white;
    padding: 10px 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    background: #ed1b24;
}

.badge::before, .badge::after {
    content: '';
    position: absolute;
    top: 0;
    margin: 0 -1px;
    width: 100%;
    height: 100%;
    background: inherit;
    min-width: 55px
}

.badge::before {
    right: 100%
}

.badge::after {
    left: 100%
}

/* ================== Badge Position CSS ========================*/
.top-left {
    position: absolute;
    top: 0;
    left: 0;
    -ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);
    -webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);
    transform: translateX(-30%) translateY(0%) rotate(-45deg);
    -ms-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}

.top-right {
    position: absolute;
    top: 0;
    right: 0;
    -ms-transform: translateX(30%) translateY(0%) rotate(45deg);
    -webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
    transform: translateX(30%) translateY(0%) rotate(45deg);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}

.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    -ms-transform: translateX(-30%) translateY(0%) rotate(45deg);
    -webkit-transform: translateX(-30%) translateY(0%) rotate(45deg);
    transform: translateX(-30%) translateY(0%) rotate(45deg);
    -ms-transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    -ms-transform: translateX(30%) translateY(0%) rotate(-45deg);
    -webkit-transform: translateX(30%) translateY(0%) rotate(-45deg);
    transform: translateX(30%) translateY(0%) rotate(-45deg);
    -ms-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}

.top-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.middle-full {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -ms-transform: translateX(0%) translateY(-50%) rotate(0deg);
    -webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);
    transform: translateX(0%) translateY(-50%) rotate(0deg);
}

.bottom-full {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

/* ================== Badge color CSS ========================*/
.badge.red {
    background: #ed1b24;
}

.badge.orange {
    background: #fa7901;
}

.badge.pink {
    background: #ee2b8b;
}

.badge.blue {
    background: #00adee;
}

.badge.green {
    background: #b4bd00;
}