Як пробитися навскоси за допомогою css

97

Мені потрібно щось подібне:

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

html  css  image  strikethrough 
— Ярослав Клімчик
джерело

Відповіді:

188

Існує шалений спосіб зробити це, використовуючи :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>
— Божангли
джерело
Я не думаю, що це працює в IE8 .. він не має жодного аналога, про transformякий я знаю, якщо не може працювати з нимfilter
— Вибухові таблетки
3
Ви маєте рацію, вибачте. IE8 витончено перетвориться на звичайну лінію закреслення. Я мав це чітко пояснити
— Боджанглз
Привіт @Bojangles, я намагаюся застосувати це до елемента TD, але в Firefox це здається трохи неправильним .. jsfiddle.net/Ms4Qy Будь-яка ідея, чому це може бути? Дякую
— Том Хантер
1
Звичайно - зроблено: stackoverflow.com/questions/18945031/…
— Tom Hunter
3
Ще одне застереження, яке слід врахувати - закреслення не відображатиметься належним чином,
— Нік
59

Ви можете використовувати фон 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>.
Розгорніть фрагмент

— користувач
джерело
7 
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.

— Майк Крістенсен
джерело
Примітка 1: -7градуси, ні +7; примітка 2: HRсірий у Chrome; це можливо замінити?
— Джон Дворжак,
А як щодо всіх браузерів, які не підтримують перетворення CSS3?
— Mooseman
Так, я вважаю, вам потрібно буде встановити border-colorі background-color. Оновлений Скрипка
— Майк Крістенсен
2

Градієнт 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/ .

Те , що ви повинні зробити , це створити background-gradientз white-black-whiteРозташовуйте opacityна що - щось на зразок 48% 50% 52%.

— Мілче Патерн
джерело
це дає мені блоки, а не рядки.
— ashleedawg
0

Я не думаю, що для цього існує стійке рішення 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%);
}
— Скретч.
джерело
-1

Я зробив це таким чином, використовуючи SVG в HTM з класом CSS:

HTML:

<ul>
<li>Regular Price: <div class="zIndex-10a">$4.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; }

Наразі можуть бути простіші простіші способи. Я щойно приготував це для своєї сторінки спеціальної пропозиції щодо деталей продукту. Сподіваюся, це комусь допомагає.

— IconMatrix
джерело
Мабуть, чогось не вистачає, оскільки це не працює в фрагменті, як є
— ashleedawg
-1

Спробуйте

.mydiv {
    background-color: #990000;
    color: #FFFF00;
    font-size: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 15px;
    max-width: 300px;
    width: 100%;
}
.strikethrough-100p, .strikethrough-50p{
  position: relative;
 text-align: center;
}
.strikethrough-100p:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 3px solid;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
.strikethrough-50p:before {
  position: absolute;
  content: "";
  width:50%;
  left: 25%;
  top: 50%;
  right: 0;
  border-top: 3px solid;
  border-color: inherit;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
<div class="mydiv">
<div class="strikethrough-100p">123456</div>
</div>
<br>
<div class="mydiv">
<div class="strikethrough-50p">123456</div>
</div>
Розгорніть фрагмент

— Варуна Манджула
джерело
-3

І ось вигадана версія:

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%;
— Джосе
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.