Иногда нужно как-то выделить акцию, а делать для этого отдельную картинку - перебор. Тогда можно сделать красивую этикетку на css:
Красивый лэйбл о скидке на css
03.06.2020
<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%); }