tachar div en diagonal con css

[helacer]

Buenas.

tengo dos div donde muestro los precios de un producto. Uno es el precio real y el otro es el precio aplicándole un descuento.

El cliente me ha solicitado que tache el precio original del producto para que se note que ese ya no es el que aplica... la idea es que se dibuje en diagonal una raya de determinado color encima pero no e sabido como hacerlo... El tacha normal con tex decoration queda muy simple y no se si se le peuda dar angulo o algo por el estilo...


Como hago eso con css?


Gracias

[furoya]

Hay varias formas de conseguir el efecto. Pero son complejas e incompatibles.
Lo mejor es ponerle encima una imagen del tachado, que puede estar "a mano alzada" y queda muchísimo mejor que los generados por el navegador.

[helacer]

gracias por responder.

Me puede dar un ejemplo de lo que me comenta?

Muchas gracias

[Ruben_JD]

un ejemplo rapido, crear una imagen png con transparecias para efecto tachar; si tu codigo de precios fuera asi:

html:
<strong>Precio nuevo</strong><br />
<strong class="tache">Precio anterior</strong>

css:
.tache{
background: url(imagen_tache) no-repeat center center;
width: 50px;
height: 50px;
}

tu imagen debera ser porprocional en alto y ancho para que siempre quede centrada en este caso a la longuitud del precio.

es bueno también reducir la intencidad del color para que el cliente note la direcencia de la oferta en este caso por ejemplo si tienes texto de color blanco en fondo negro, asignar plateado a precio anterior.

Suerte.

[ebestudio]

Hola helacer, es muy buena opción la que propone furoya.

El ejemplo sería colocal un div por encima del otro. En el de abajo le tipeas el precio, y en el de arriba le colocas la imagen de la X en 'png'.
Un poco más de maña en css y ya está hecho!

Saludos,

[furoya]

Un par de detalles del código anterior.

Es algo que se puede encontrar en cualquier tutorial. Y si tienes un cliente, entonces se supone que sabes hacer páginas web (de otra forma, sería un típico caso de intrusismo), y ya debes saber cómo se pone un fondo. Por eso yo no escribí el ejemplo.
Por otro lado, lo que vale es el diseño del tachado. Y menos te voy a hacer un ejemplo de imagen para colgarlo de algún server.

El otro punto es que la imagen debe ser del mismo color del texto, o se va a notar que está por detrás y no "tachando".

Puedo agregar que sí estoy totalmente de acuerdo en que calcules el tamaño. Va a tener que ser lo más proporcional que te salga al tamaño del texto. Al no poner tu ejemplo, no sabemos si está en una celda de tabla, en un ítem de lista, si es una imagen y no un texto, ...
Porque CSS3 te permite "ajustar" esa imagen de fondo a las medidas del contenedor, pero es posible que se deforme. En un tachado, que es desprolijo por definición, no es tan grave, pero hay que tenerlo en cuenta.

Por último, mejor que un fondo es superponer la imagen al precio. Ahí lo acomodas como quieres y con el color que más te guste.

Edición:

Bah, otra vez postié sin mirar el mensaje previo.

Bueno, esto sería un "desarrollo" de tu aclaración, ebestudio.

[kseso?]

¿Si pregunta en el foro de css es porque busca una solucción vía css?
Descarto una respuesta negativa.

Para apuntar una respuesta viable y funcional para una página "industrial" falta información. Entre otros datos los navegadores y versiones a tener en cuenta y qué otros lenguajes/recursos se están empleando.

Como sugerencia de tachado en puro css:

Código CSS:

.suclase:after {
  content: 'X';
  font-family: "al gusto";
  font-size: Xxunidades;
  line-height: .......
  /*resto de declaraciones necesarias*/
}
 

otra vía en puro css serían 1 borde de los pseudoelementos :before y :after y girados con transform.

Supongo que alguna más se podría encontrar, pero lo dicho antes, falta información.

[furoya]

Sí. Y no olvides lo de la incompatibilidad. Por eso le sugerí de entrada la imagen.
Lo que no se me había ocurrido era lo de meterla con :after
Así simplemente sería darle una clase "tachado" a todos los precios sin descuento. Creo que no funciona en IE6, pero no estoy seguro.

Hace poco puse un ejemplo de algo así, ¿recuerdas?

Tachado sin enlace