gtilflm gtilflm - 2 months ago 19
CSS Question

Diagonal line through <div> or <span>

I'm wanting to have a diagonal line drawn from the upper-right corner of a

<div>
or
<span>
to the lower-left corner. The problem is that the content will sometimes be longer or shorter. So, something like a static image won't work. Basically I want what's described here (How to create a diagonal line within a table cell?) but for a
<div>
or a
<span>
.

This has some interesting ideas: http://jsfiddle.net/zw3Ve/11/

So does this: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1

This is kind of a retry at this post: How to strike through obliquely with css

I can't seem to figure any of this out though. It seems like a pure CSS solution should work here, but I just don't have the skills to make that happen. jQuery is an option for me as well.

Answer

is first fiddle as exemple with image in background instead not good enough ?

http://jsfiddle.net/zw3Ve/410/

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}