badge flag shopee

shopee-badge.html

<div class="item-image"> 
  <div class="shopee-item-card__badge-wrapper">
    <div class="shopee-badge shopee-badge--fixed-width shopee-badge--promotion">
      <div class="shopee-badge--promotion__label-wrapper shopee-badge--promotion__label-wrapper--vi-VN">
        <span class="percent">16%</span>
        <span class="shopee-badge--promotion__label-wrapper__off-label shopee-badge--promotion__label-wrapper__off-label--vi-VN">giảm</span>
      </div>
    </div>
  </div>
</div>

<style>
.item-image {
width: 100%;
position: relative;
.shopee-badge {
    display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    position: relative;
    padding: 4px 2px 3px 2px; 
}
.shopee-badge--fixed-width {
    width: 38px;
    height: 35px; 
}
.shopee-badge--new {
    background-color: rgba(0, 191, 165, .85);
    padding-top: 3px; 
}

.shopee-item-card__badge-wrapper {
    position: absolute;
    right: 0;
    top: 0; }
.shopee-item-card__badge-wrapper .shopee-badge {
    float: right;
    margin-left: 0.5rem; 
}
.shopee-badge--promotion {
    background-color: #B6161E; 
}
// .shopee-badge--promotion:after {
//     content: "";
//     width: 0;
//     height: 0;
//     left: 0;
//     bottom: -4px;
//     border-style: solid;
//     position: absolute;
//     border-width: 0 19px 4px 19px;
//     border-color: transparent #B6161E transparent #B6161E; 
// }
.shopee-badge--promotion__label-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    position: relative;
    font-weight: bold;
    line-height: 12px;
    color: white;
    text-transform: uppercase;
    font-size: 1.2rem; 
  }
}

</style>