вот вам самое простое решение
div{
position: relative;
}
div::after{
content: '';
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url('../img/pages/product/old-price.svg');
background-size: cover;
}
суть такова что мы накладываем сверху псевдоэлемент с изображением подложки в формате svg. На нем нарисована линия по диагонали. Как бы вы не тянули вектор и не сжимали - пикселей как у jpg вы на нем не увидите, а линия будет четкой. Если вы не хотите заморачиваться с созданием файла - вы можете воспользоваться конструкцией
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="100%" x2="100%" y2="0" stroke="#FF6969" stroke-width="2"/> </svg>');
но это будет работать не во всех браузерах как говорит источник
поэтому после перекодирования это строка будет выглядеть так
url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwIiBzdHJva2U9IiNGRjY5NjkiIHN0cm9rZS13aWR0aD0iMiIvPiA8L3N2Zz4=');
.old-price{
color: #9C9997;
font-weight: 400;
font-size: 16px;
line-height: 140%;
position: relative;
}
.old-price::after{
content: '';
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwIiBzdHJva2U9IiNGRjY5NjkiIHN0cm9rZS13aWR0aD0iMiIvPiA8L3N2Zz4=');
background-size: cover;
}
<span class="old-price">3200 р.</span>