Как нанести наклон через css

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

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

Ответ 1

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

Здесь демо

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

Это будет работать только с IE8. IE7 не поддерживает :before, однако будет грамотно деградировать в браузерах, которые поддерживают :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>

Ответ 2

Вы можете использовать background 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>.

Ответ 3

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

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

Fiddle

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

Ответ 4

del {
    position:relative;
    text-decoration:none;
}
del::after {
    content:"";
    position:absolute;
    top:50%; left:0; width:100%; height:1px; 
    background:black;
    transform:rotate(-7deg);
}

Ответ 5

Градиент 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/

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

Выполнять

Ответ 6

Я не думаю, что для этого существует устойчивое решение 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>

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

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

Ответ 7

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

Для подробного объяснения и проверки LESS Solution

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

Ответ 8

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

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%;