Strike through text

Strike on a slant

[henry0]

HEllo,
is there a simple html code that allows to strike a text
<s>text</>
but on a slant, for ex: from bottom left to top right

I need it for a client that needs to show (the previous)striked prices and then new price, a few hundreds!
that page is pure shtml and CSS
so if that would be the answer I can add a class
but which one

thank you

regards

[pageoneresults]

Hello henry0. I've never seen anything relative to slant. You could use the standard...

text-decoration:line-through;

...to achieve a similar effect without the slant. Otherwise, I think you'll need to create an image to achieve the slanted effect.

The text-decoration property [w3.org]

[henry0]

thank you
I was afraid of the img solution
that site was on a small budget
and do not run a db..I wish I had one..

[pageoneresults]

I've been thinking about this since seeing your post. I wonder if you can create a transparent background image (your slanted line), and then assign that to a <span> element that wraps around the old price. I'll bet you can! ;)

.slant{
background:transparent url('/images/slant.gif') no-repeat center center;
}

<span class="slant">$999.00</span>

[henry0]

pageoneresults
This is a great idea
Yes indeed it should work

thank you for headscratching-time :)

regards

[pageoneresults]

Hehehe, works like a charm in IE, I've not tried other browsers. Now, how to get the slanted line to come forward. I'm playing with that now...

<added>I can't quite figure out how to bring the background image forward so it sits on top of the price instead of behind it.

FYI, my image is 100px wide by 15px tall. You'll need to determine your image size so that it creates a consistent effect amongst all price levels i.e. 2 digit, 3 digit, 4 digit, etc. The image is mostly white space with the red diagonal line running from lower left to upper right corner.

[henry0]

can we add a Z index?

[pageoneresults]

I tried it but I'm not the one to be answering questions about z-index as I do not use it frequently. Most of my designs are exact and, very few if any elements overlap one another where the z-index is required.

I tried two instances of z-index and could not bring it forward. Since this is a background image, I think it is something that is unaffected by z-index. I'm just not sure.

So now I look at that diagonal line effect and think, hmmm, I like it behind the numbers as you can see what numbers they are. If it were on top, it might obscure the number and make it unreadable. There are always two ways to look at something. ;)

[henry0]

Pageoneresult
Very good marketing statement!
Thank you
As is it will do fine
However just for the idea of solving the problem
I keep the wheels spinning

[henry0]

I think I got a possible one
but will play with it tomorrow
instead of using it as BG
why not just use it as an img (transp gif)
thus Z-index should do it

cheers

[TGecho]

Then you have problems with positioning it over the price.