зачеркнутая цена по диагонали в css

Question

Поле с ценой всегда разной длинны, угол диагонали будет постоянно меняться. Сделать на чистом css

Answer 1

решение - наложить поверх ::after псевдо-элемент с фоном в виде svg. svg можно вставлять прямо в css пример

.old-price{
  position: relative;
  display: inline-block;
}
.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;utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%22100%25%22%20x2%3D%22100%25%22%20y2%3D%220%22%20stroke%3D%22%23F00%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E');
        background-size: cover;
}

<div><div class="old-price">1 000 р</div></div>
<div><div class="old-price">100 р</div></div
<div><div class="old-price">100 000 р</div></div

чтобы вставить svg -его нужно декодировать UrlDecoder

прикладываю вам svg, если захотите менять толщину линии и её цвет

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <line x1="0" y1="100%" x2="100%" y2="0" stroke="#F00" stroke-width="2"/>
</svg>

БЛОГ НА HUSL

зачеркнутая цена по диагонали в css

Ответы (1 шт):