Как нанести удар наискось с помощью css

Мне нужно что-то вроде этого:

Как можно достичь этого с помощью css? Я знаю, что один из способов - использовать фоновое изображение, но могу ли я достичь этого только с помощью css без какого-либо изображения?

9 74
html css image-processing strikethrough

9 ответов:

есть хаки способ сделать это, используя :before элемент псевдо. Вы даете :before граница, затем поверните ее с помощью преобразования CSS. Выполнение этого способа не добавляет никаких дополнительных элементов в DOM, а добавление/удаление зачеркивания-это просто добавление/удаление класса.

вот демо

предостережения

  • это будет работать только до IE8. IE7 не поддерживает :before, однако будет постепенно деградировать в браузерах это do поддержка :before но не поддерживают преобразования CSS.
  • угол поворота фиксируется. Если текст длиннее, то линия не будет касаться углов текста. Помните об этом.

CSS

.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);
}

HTML

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

вы можете использовать фон linear-gradient С currentColor чтобы избежать жесткого кодирования цвет шрифта:

.strikediag {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
  padding: 0 0.15em;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.

Если вам не нужно, чтобы элемент был полностью встроен, вы можете использовать псевдо-элемент для размещения строки поверх элемента. Таким образом, угол можно регулировать, изменяя размер псевдо-элемента:

.strikediag {
  display: inline-block;
  position: relative;
}
.strikediag::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
27
del {
    position:relative;
    text-decoration:none;
}
del::after {
    content:"";
    position:absolute;
    top:50%; left:0; width:100%; height:1px; 
    background:black;
    transform:rotate(-7deg);
}
4

Я думаю, что вы, вероятно, могли бы применить эффект вращения к горизонтальному правилу. Что-то вроде:

<html>
    <body>
        <hr />
        123456
    </body>
</html>

С помощью CSS:

HR
{
   width: 50px;
   position: absolute;
   background-color: #000000;
   color: #000000;
   border-color: #000000;
   transform:rotate(-7deg);
   -ms-transform:rotate(-7deg);
   -moz-transform:rotate(-7deg);
   -webkit-transform:rotate(-7deg);
   -o-transform:rotate(-7deg);
}

Скрипка

ваш пробег может варьироваться в зависимости от браузера и версии, поэтому я не уверен, что прибегну к этому. Возможно, вам придется снять некоторые фанки VML-код для поддержки более старых версий IE, например.

4

CSS3 градиенты

background-image: linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -o-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -moz-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -webkit-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -ms-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);

background-image: -webkit-gradient( linear, left bottom,right top,color-stop(0, rgb(234,20,136)), color-stop(0.5, rgb(255,46,164)), color-stop(0, rgb(255,74,197)) );

мой пример не заполнит ваши потребности, но для получения дополнительной информации и забавных твиков:http://gradients.glrzad.com/

что вам нужно сделать, это создать фоновый градиент белого-черного-белого и расположить свою непрозрачность на линии smthing 48% 50% 52%

на

3

Я не думаю, что есть устойчивое решение css для этого.

мое чистое решение CSS состояло бы в том, чтобы поместить другой элемент текста за вашим первым элементом текста, который идентичен по количеству символов (символы являются''), текстовое деклерование строки и преобразование поворота.

что-то типа:

<html>
<head>
<style>
.strike{
 text-decoration: line-through;
-webkit-transform: rotate(344deg);
-moz-transform: rotate(344deg);
-o-transform: rotate(344deg);}
</style>
</head>
<body>
<p>Text to display</p>
<p class='strike'>               </p>
</body>

пример поворота текста

Я с нетерпением жду лучших ответов от других пользователи.

0

Это старый вопрос, но в качестве альтернативы вы можете использовать CSS3 линейных градиентов, например (http://codepen.io/yusuf-azer/pen/ojJLoG).

для подробного объяснения и менее проверки решения

http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagonal-line-through-with-css3/

span.price--line-through {
  background-color: transparent;
  background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.475, #fff), color-stop(.5, #000), color-stop(.515, #fff), color-stop(1, #fff));
  background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
  background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
  background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
}
0

Я сделал это таким образом, используя SVG в HTM с классом CSS:

HTML:

<ul>
<li>Regular Price: <div class="zIndex-10a">.50</div><div class="zIndex-10b"><svg height="16" width="5"><line x1="0" y1="20" x2="40" y2="0" class="Strike-01a"></svg></div></li>
</ul>

CSS:

/* -- CONTAINS TEXT TO STRIKE ---- */ .zIndex-10a { display: inline-block; position: relative;  left:  0px; z-index: 10; }
/* -- CONTAINS SVG LINE IN HTML -- */ .zIndex-10b { display: inline-block; position: relative; right: 40px; z-index: 11; }
/* -- SVG STROKE PROPERTIES ------ */ .Strike-01a { stroke: rgb(255,0,0); stroke-width:2; }

там могут быть более простые и легкие способы к настоящему времени. Я просто приготовил это в крайнем случае для моей страницы специального предложения детали продукта. Надеюсь, это кому-то поможет.

0

и вот причудливая версия:

background:none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
content: "";
height:5px; left:-5%;
position:absolute;
top:30%;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
transform-origin:50% 50% 0;
width:110%;
-2