7

Пробую трансформацией, но transform-origin приходится по пикселям подгонять, а если будет строка длиннее или короче, то все опять съезжает (должно быть по серединке).

Вопрос: Какие есть оптимальные варианты для верстки перечеркнутого текста по диагонали для строки разной длины?

.str {
  position: relative;
  display: inline-block;
}

.str:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: red;
  transform: rotate(-10deg);
}
<div class="str">Lorem ipsum.</div>

1
  • Что-то я сомневаюсь, что на чистом css есть что-то универсальное 12 мая 2017 в 12:54

4 ответа 4

5

Самый просто способ , работает со любой разумной длиной

p{
	white-space:pre;
	position:relative;
	display:inline-block;
	font-size:20px;
}
p:after{
	content:"";
	display:block;
	position:absolute;
	left:0;top:50%;
	color:red;
	width:100%;
	height:0;
	border-bottom:2px solid red;
	transform:rotate(-1deg);
}
<p class="">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
</p>

<p class="">Praesent sapien massa,Praesent sapien massa,  convallis a pellentesque nec, egestas non nisi.
</p>

<p class="">Praesent sapien massa, convallis 
</p>

1
  • Только сейчас подумал, что при перечеркивании таким способом коротких слов из 2-х 3-х букв наклона вообще не будет заметно, получится обычное горизонтальное зачеркивание.
    – Speller
    2 июн 2017 в 9:38
4

Могу предложить вот такой хак. Создается тег с классом, который обозначает зачеркивание. И в него скриптом добавляется svg зачеркивание. Тогда работает со строкой любой длины:

HTML:

<div>
SK tslk ser; k;stlk esl;kt <b class="trow">sdasfasfasfasfwshgf</b> srg ser se t
</div>

CSS

b{position:relative;}
svg{width:100%;position:absolute;height:100%;left:0;}

JS

$(".trow").append("<svg><line x1='0' y1='100%' x2='100%' y2='0' stroke-width='1' stroke='rgb(0,0,0)'></line></svg>");

Пример:

https://jsfiddle.net/v8vb6a8s/

1
  • спасибо, но не хотелось бы еще и скрипты на такое добавлять
    – SVE
    12 мая 2017 в 13:16
0

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}


    
<span class="strikethrough">Deleted text</span>

4
  • 1
    было же написано для строки разной длины ...... вот сделай свою строку длинней и ты почувствуешь боль... 12 мая 2017 в 12:52
  • @АлексейШиманский, ну это более менее, по серединке. Лучше чем скрипты на такое сыпать.
    – SVE
    12 мая 2017 в 13:16
  • 1
    @Elena но оно же, с учетом твоего же требования, бессмысленно.... и гуглится ровно минуту) там и других решений достаточно.....однако при увеличении длины текста всегда беда.... мне кажется скрипт - is the only way. 12 мая 2017 в 13:24
  • вот добавила текст prntscr.com/f70jwn и линия по серединке,у меня проблема была в расположении. Мне ответ нравится, хотя не спорю что не идеален, но ... и минусовать не стоит.
    – SVE
    12 мая 2017 в 13:50
0

вот вам самое простое решение

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>

1
  • @HamSter как тебе такое решение?
    – Mcile
    18 апр 2022 в 12:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.