Красивый лэйбл о скидке на css

03.06.2020

Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:

pic1

 
<div class="sale_lable">
    40%
</div>

 
.sale_lable {
    width: 200px;
    height: 90px;
    background: linear-gradient(to left, darkred, red, darkred);
    clip-path: polygon(0 50%, 20% 0, 100% 0, 100% 100%, 20% 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: 900;
    font-family: sans-serif;
    color: #fff;
    text-indent: 30px;
}

.sale_lable::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    background: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(0, -50%);

}


Категории: HTML, CSS, -Памятка-
Пометки: бэйдж со скидкой. Треугольник на css, акции, акция, баннер
Яндекс.Метрика