Wie man mit CSS schräg durchschlägt

97

Ich brauche so etwas:

Wie kann dies mit CSS erreicht werden? Ich weiß, dass eine Möglichkeit darin besteht, ein Hintergrundbild zu verwenden, aber kann ich dies nur mit CSS ohne Bild erreichen?

html css image strikethrough Jaroslav Klimčík
quelle

188

Es gibt eine hackige Möglichkeit, dies mithilfe des Pseudoelements zu tun :before. Sie geben dem Rahmen :beforeeinen Rand und drehen ihn dann mit einer CSS-Transformation. Wenn Sie dies auf diese Weise tun, werden dem DOM keine zusätzlichen Elemente hinzugefügt, und das Hinzufügen / Entfernen des Durchgestrichenen ist so einfach wie das Hinzufügen / Entfernen der Klasse.

Hier ist eine Demo

Vorsichtsmaßnahmen

Dies funktioniert nur bis IE8. IE7 nicht unterstützt:before , wird jedoch degradieren graziös in Browsern , die nicht unterstützen , :beforeaber keine Unterstützung für CSS - Transformationen.
Der Drehwinkel ist fest. Wenn der Text länger ist, berührt die Linie nicht die Ecken des Textes. Sei dir dessen bewusst.

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>

Bojangles
quelle

Ich glaube nicht, dass dies in IE8 funktioniert. Es gibt kein Analogon zu dem transform, von dem ich weiß, es sei denn, es kann funktionierenfilter

Explosion Pills

3

Du hast recht, sorry. IE8 wird elegant in eine normale durchgestrichene Linie umgewandelt. Ich hätte das klarstellen sollen

Bojangles

Hallo @Bojangles, ich versuche dies auf ein TD-Element anzuwenden, aber es scheint in Firefox ein bisschen schief zu gehen. Jsfiddle.net/Ms4Qy Irgendeine Idee, warum dies sein könnte? Vielen Dank

Tom Hunter

1

Sicher - fertig: stackoverflow.com/questions/18945031/…

Tom Hunter

3

Eine weitere zu berücksichtigende Einschränkung: Das Durchstreichen wird nicht wie erwartet gerendert, wenn Ihr Text in zwei Zeilen unterteilt ist: d.pr/i/1dKP5

Nick

59

Sie können Hintergrund verwenden linear-gradient mit verwenden currentColor, um eine Hardcodierung der Schriftfarbe zu vermeiden:

.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>.

Erweitern Sie das Snippet

Wenn das Element nicht vollständig inline sein muss, können Sie ein Pseudoelement verwenden, um die Linie über dem Element zu platzieren. Auf diese Weise kann der Winkel durch Ändern der Größe des Pseudoelements angepasst werden:

.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>.

Erweitern Sie das Snippet

Benutzer
quelle

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

Kornel
quelle

4

Ich denke, Sie könnten wahrscheinlich einen Rotationseffekt auf eine horizontale Regel anwenden. Etwas wie:

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

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

Geige

Ihr Kilometerstand kann jedoch je nach Browser und Version variieren, daher bin ich mir nicht sicher, ob ich darauf zurückgreifen würde. Möglicherweise müssen Sie funky VML-Code abrufen, um beispielsweise ältere Versionen von IE zu unterstützen.

Mike Christensen
quelle

Anmerkung 1: -7Grad, nicht +7; Anmerkung 2: HRist in Chrome grau; ist das möglich zu überschreiben?

John Dvorak

Und was ist mit all den Browsern, die keine CSS3-Transformationen unterstützen?

Mooseman

Ja, ich glaube du musst einstellen border-colorund background-color. Aktualisiert Fiddle

Mike Christensen

2

CSS3-Gradient

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

Mein Beispiel wird Ihre Anforderungen nicht perfekt erfüllen, aber für weitere Informationen und lustige Verbesserungen siehe http://gradients.glrzad.com/ .

Was Sie tun müssen, ist ein background-gradientvon zu erstellen white-black-whiteund Ihr opacityauf so etwas zu positionieren 48% 50% 52%.

Milche Patern
quelle

Das gibt mir Blöcke, keine Linien.

Ashleedawg

0

Ich glaube nicht, dass es dafür eine nachhaltige CSS-Lösung gibt.

Meine reine CSS-Lösung wäre, ein anderes Textelement hinter Ihrem ersten Textelement zu platzieren, das in der Anzahl der Zeichen identisch ist (Zeichen sind ''), eine Textdekleration der Durchleitung und eine Transformation der Drehung.

Etwas wie:

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

Beispiel für eine Textrotation

Ich freue mich auf bessere Antworten von anderen Benutzern.

Levi
quelle

0

Dies ist eine alte Frage, aber als Alternative können Sie beispielsweise lineare CSS3-Verläufe verwenden ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Für ausführliche Erklärungen und eine WENIGER Lösungsprüfung

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

Kratzen.
quelle

-1

Ich habe es so gemacht, indem ich eine SVG im HTM mit einer CSS-Klasse verwendet habe:

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

Es könnte jetzt einfachere und einfachere Wege geben. Ich habe das gerade zur Not für meine Seite mit Sonderangeboten für Produktdetails zusammengestellt. Hoffe es hilft jemandem.

IconMatrix
quelle

Es muss etwas fehlen, da dies in einem Snippet nicht so funktioniert, wie es ist

ashleedawg

-1

Versuchen

.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>

Erweitern Sie das Snippet

Waruna Manjula
quelle

-3

Und hier ist eine schicke Version:

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

Jose
quelle

Wie man mit CSS schräg durchschlägt

Antworten:

Vorsichtsmaßnahmen

CSS

HTML