Diagonal line through <div> or <span> - html

Question

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 1

You can do this with an inline SVG background, using only CSS and no javascript.
.background {
// Draw an SVG top left to bottom right
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
background-repeat:no-repeat;
background-position:center center;
//scale it
background-size: 100% 100%, auto;
}
See my fiddle:
http://jsfiddle.net/3GWw2/

Answer 2

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

Answer 3

You can do this with linear-gradient. For example if I want a green and white square that cuts diagonally from bottom left to top right, I give it this background attribute:
background: linear-gradient(to bottom right, white, white 50%, green 50%, green);
This means that it starts as white at the top left corner and continues as white all the way to the diagonal line. The transition is immediately from white to green with no actual gradient as both are set at 50%. If you want a gray line between, you could try this:
background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);

Answer 4

You might use an SVG image like this one:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50">
<line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>
Set it as background of your span or div
.class-of-div-or-span { background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; }
Note: you have to give your span display:block or display:inline-block in order to work.
You could also inline the svg, use it in an object tag or embed it in your css.

Answer 5

Actually this is more of a question about geometry than coding. With squares this is easy, but with rectangles you'll have to do the math yourself. Remember those kids complaining that they'll never have to calculate a diagonal's length in "real life"? :P
Here's what I did:
div.container /*makes a square container (300x300)*/
{
width: 300px;
height: 150px;
background-color: #aaa;
padding-top: 150px;
}
div.line
{
position: relative;
z-index: 1;
left: -61px; /*this is something I don't understand but apparently is required*/
width: 423px; /*since container is a square this equals to its diagonal: 300*1.41*/
height: 1px;
background-color: #000;
transform: rotate(45deg); /*again, this is easy since its a square. In rectangle you'll have to find a tangent*/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
HTML:
<div class="container">
<div class="line"></div>
</div>
and a jsfiddle: http://jsfiddle.net/LWAKn/