Jak przebić się ukośnie za pomocą CSS

97

Potrzebuję czegoś takiego:

Jak można to osiągnąć za pomocą CSS? Wiem, że jednym ze sposobów jest użycie obrazu tła, ale czy mogę to osiągnąć tylko z css bez żadnego obrazu?

html css image strikethrough Jaroslav Klimčík
źródło

Odpowiedzi:

188

Można to zrobić w okrutny sposób, używając :beforepseudoelementu. Dajesz :beforeobramowanie, a następnie obracasz je za pomocą transformacji CSS. Zrobienie tego w ten sposób nie dodaje żadnych dodatkowych elementów do DOM, a dodanie / usunięcie przekreślenia jest tak proste, jak dodanie / usunięcie klasy.

Oto demo

Ostrzeżenia

  • To zadziała tylko do IE8. IE7 nie obsługuje:before , jednak będzie się z wdziękiem degradować w przeglądarkach, które obsługują, :beforeale nie obsługują transformacji CSS.
  • Kąt obrotu jest stały. Jeśli tekst jest dłuższy, linia nie będzie dotykać rogów tekstu. Miej to na uwadze.

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
źródło
Nie sądzę, żeby to działało w IE8 .. nie ma żadnego analogu do transformtego, o którym wiem, chyba że może działaćfilter
Explosion Pills
3
Masz rację, przepraszam. IE8 z wdziękiem przejdzie do normalnej linii przekreślonej. Powinienem był to wyjaśnić
Bojangles
Cześć @Bojangles, próbuję zastosować to do elementu TD, ale wydaje się, że działa to trochę źle w Firefoksie .. jsfiddle.net/Ms4Qy Masz jakiś pomysł, dlaczego tak się dzieje ? Dzięki
Tom Hunter
1
Jasne - gotowe: stackoverflow.com/questions/18945031/…
Tom Hunter
3
Kolejne zastrzeżenie do rozważenia - przekreślenie nie zostanie wyrenderowane zgodnie z oczekiwaniami, jeśli tekst zostanie podzielony
Nick.
59

Możesz użyć tła linear-gradientz, currentColoraby uniknąć zakodowania koloru czcionki:

.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>.
Rozwiń fragment

Jeśli nie potrzebujesz, aby element był w pełni wbudowany, możesz użyć pseudoelementu, aby umieścić linię na górze elementu. W ten sposób kąt można dostosować, zmieniając rozmiar pseudoelementu:

.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>.
Rozwiń fragment

użytkownik
źródło
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
źródło
4

Myślę, że prawdopodobnie można by zastosować efekt rotacji do reguły poziomej. Coś jak:

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

Dzięki 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);
}

Skrzypce

Twój przebieg może się jednak różnić w zależności od przeglądarki i wersji, więc nie jestem pewien, czy skorzystałbym z tego. Być może będziesz musiał pobrać jakiś funky kod VML, aby na przykład obsługiwać starsze wersje IE.

Mike Christensen
źródło
Uwaga 1: -7stopnie, nie +7; uwaga 2: HRw Chrome jest szara; czy można to zmienić?
John Dvorak
A co ze wszystkimi przeglądarkami, które nie obsługują transformacji CSS3?
Mooseman,
Tak, myślę, że musisz ustawić border-colori background-color. Zaktualizowano Fiddle
Mike Christensen
2

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

Mój przykład nie spełni twoich potrzeb idealnie, ale więcej informacji i zabawnych poprawek znajdziesz na http://gradients.glrzad.com/ .

Co trzeba zrobić, to stworzyć background-gradientod white-black-whitei pozycję opacityna coś podobnego 48% 50% 52%.

Milche Patern
źródło
to daje mi bloki, a nie linie.
ashleedawg
0

Myślę, że nie ma na to trwałego rozwiązania CSS.

Moim czystym rozwiązaniem CSS byłoby umieszczenie kolejnego elementu tekstu za pierwszym elementem tekstu, który jest identyczny pod względem liczby znaków (znaki to „”), dekleracja tekstu przechodząca przez wiersz i przekształcenie obrotu.

Coś jak:

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

Przykład obrotu tekstu

Nie mogę się doczekać lepszych odpowiedzi od innych użytkowników.

Levi
źródło
0

To stare pytanie, ale jako alternatywę możesz użyć na przykład liniowych gradientów CSS3 ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Obszerne wyjaśnienia i MNIEJSZE sprawdzenie rozwiązania

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%);
}
Zadraśnięcie.
źródło
-1

Zrobiłem to w ten sposób używając SVG w HTM z klasą 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; }

Teraz mogą być prostsze sposoby. Przygotowałem to w mgnieniu oka na stronę oferty specjalnej ze szczegółami produktu. Mam nadzieję, że to komuś pomoże.

IconMatrix
źródło
Musi czegoś brakować, ponieważ to nie działa we fragmencie tak, jak jest
ashleedawg
-1

Próbować

.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>
Rozwiń fragment

Waruna Manjula
źródło
-3

A oto fantazyjna wersja:

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
źródło