Diagonal line through <div> or <span>

css, html

Solution

Is first fiddle as example 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%;
}

Problem

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.

Original source

Related problems