Cómo marcar oblicuamente con CSS

97

Necesito algo como esto:

¿Cómo se puede lograr esto con CSS? Sé que una forma es usar la imagen de fondo, pero ¿puedo lograr esto solo con css sin ninguna imagen?

html css image strikethrough Jaroslav Klimčík
fuente

188

Hay una forma hacky de hacer esto, usando el :beforepseudo elemento. Le da :beforeun borde, luego lo gira con una transformación CSS. Hacerlo de esta manera no agrega elementos adicionales al DOM, y agregar / eliminar el tachado es tan simple como agregar / eliminar la clase.

Aquí hay una demostración

Advertencias

Esto solo funcionará hasta IE8. IE7 no es compatible:before , sin embargo, se degradará con gracia en los navegadores que sí admiten :beforepero no admiten transformaciones CSS.
El ángulo de rotación es fijo. Si el texto es más largo, la línea no tocará las esquinas del texto. Tenga esto en cuenta.

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
fuente

No creo que esto funcione en IE8 ... no tiene ningún análogo al transformque yo sepa a menos que pueda funcionarfilter

Explosion Pills

3

Tienes razón, lo siento. IE8 se degradará graciosamente a una línea tachada normal. Debería haberlo dejado claro

Bojangles

Hola @Bojangles, estoy tratando de aplicar esto a un elemento TD, pero parece ir un poco mal en Firefox .. jsfiddle.net/Ms4Qy ¿ Alguna idea de por qué podría ser esto? Gracias

Tom Hunter

1

Seguro - hecho: stackoverflow.com/questions/18945031/…

Tom Hunter

3

Otra advertencia a considerar: el tachado no se reproducirá como se esperaba si su texto se divide en dos líneas: d.pr/i/1dKP5

Nick

59

Puede utilizar el fondo linear-gradientcon currentColorpara evitar codificar el color de la fuente:

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

Expandir fragmento

Si no necesita que el elemento esté completamente en línea, puede usar un pseudoelemento para colocar la línea encima del elemento. De esta manera, el ángulo se puede ajustar cambiando el tamaño del pseudo elemento:

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

Expandir fragmento

usuario
fuente

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
fuente

4

Creo que probablemente podrías aplicar un efecto de rotación a una regla horizontal. Algo como:

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

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

Violín

Sin embargo, su kilometraje puede variar según el navegador y la versión, por lo que no estoy seguro de si recurriría a esto. Puede que tenga que utilizar un código VML original para admitir versiones anteriores de IE, por ejemplo.

Mike Christensen
fuente

Nota 1: -7grados, no +7; nota 2: HRes gris en Chrome; ¿es posible anularlo?

John Dvorak

¿Y qué pasa con todos los navegadores que no admiten las transformaciones CSS3?

Mooseman

Sí, creo que necesitará configurar border-colory background-color. Fiddle actualizado

Mike Christensen

2

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

Mi ejemplo no satisfará perfectamente sus necesidades pero, para obtener más información y ajustes divertidos, consulte http://gradients.glrzad.com/ .

Lo que tienes que hacer es crear un background-gradientde white-black-whitey posicionar tu opacityen algo como 48% 50% 52%.

Milche Patern
fuente

esto me da bloques, no líneas.

ashleedawg

0

No creo que haya una solución CSS sostenible para esto.

Mi solución CSS pura sería colocar otro elemento de texto detrás de su primer elemento de texto que sea idéntico en número de caracteres (los caracteres son ''), una declinación de texto de línea directa y una transformación de rotar.

Algo como:

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

Ejemplo de rotación de texto

Espero ver mejores respuestas de otros usuarios.

Levi
fuente

0

Esta es una pregunta antigua, pero como alternativa, puede usar CSS3 Linear Gradients, por ejemplo ( http://codepen.io/yusuf-azer/pen/ojJLoG ).

Para una explicación detallada y una verificación MENOS de solución

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

Rasguño.
fuente

-1

Lo hice de esta manera usando un SVG en el HTM con una clase 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; }

Puede que ahora haya formas más sencillas y sencillas. Acabo de preparar esto en un apuro para la página de ofertas especiales de detalles de mi producto. Espero que ayude a alguien.

IconMatrix
fuente

Tiene que haber algo falta, porque esto no funciona en un fragmento tal cual

ashleedawg

-1

Tratar

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

Expandir fragmento

Waruna Manjula
fuente

-3

Y aquí hay una versión elegante:

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
fuente

Cómo marcar oblicuamente con CSS

Respuestas:

Advertencias

CSS

HTML