Как реализовать нестандартное перечеркивание цены?

Question

[Даниил Конев]

Доброй ночи!

https://skr.sh/sBG4rvAH64I?a

Как такое можно сделать в css?

Comments

[bevertax]

Если требуется только средствами css делать, то можно попробовать наложить какую-нибудь фигуру вроде овала на цену, внешнему контейнеру сделать overflow: hidden. Тогда можно добиться того, чтобы часть границы овала как раз была похожа на красную линию, а весь остальной овал был скрыт

[Ankhena]

Как такое можно сделать в css?

Взять SVG и заинлайнить в CSS и не парить мозг.

Answer 1

[FrelFrloich]

песевдоелементом и задать ему transform rotate 10 deg

Answer 2

[Даниил Конев]

Нашел готовое решение, вот код: https://codepen.io/arhey/pen/VmPaEN

Правда если вставлять к себе, скорее всего придется отрегулировать высоту и ширину, что бы линия показывалась.

Пользуйтесь:)