Diagonal line through
or

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.

How do you want the diagonal line drawn if the `` wraps across lines? Should the code pretend that the `` is on one line, draw two separate diagonal lines, or ignore that possibility? — Rory O'Kane, Jul 11 '13 at 19:59
are you looking for a way to draw elements on the page? (maybe not just a line?) — Dany Khalife, Jul 11 '13 at 20:06
Here is [a demo of a variation of your linked solution](http://jsfiddle.net/roryokane/apwm7/). It is the latest jsFiddle demo in the question you posted, changed to work with `div`s and `spans` instead of tables. It looks like `div`s already work fine, but the diagonal line for `span`s appears at the beginning of the line instead of over the `span`. — Rory O'Kane, Jul 11 '13 at 20:10
Possible duplicate of [How to strike through obliquely with css](http://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css) — Ciro Santilli新疆棉花TRUMP BAN BAD, Jul 05 '16 at 20:44

score 24 · Answer 1 · edited Dec 08 '16 at 11:48

24

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/

edited Dec 08 '16 at 11:48

GSerg

71,102
17
141
299

answered Nov 27 '13 at 01:35

Tristan Brotherton

2,423
5
31
37

Interesting...what's the compatibility of this approach? – acjay Dec 11 '13 at 23:07
3

If you're not familiar with the element of – jpoveda Nov 28 '15 at 06:30
2

Also note that if you want to do upper right to lower left, you don't need to draw to the lower left first, as was done in this answer. You can just use: – jpoveda Nov 28 '15 at 06:33
Also note that you need to [escape `#` as `%23`](http://stackoverflow.com/a/10768631/11683) if you use hex color values. – GSerg Dec 08 '16 at 17:28
Wouldn't `M0 0 L10 10` be more appropriate ? Also, note that `//` are not CSS comments (they will actually comment the [*next* construct](https://www.xanthir.com/b4U10), i.e. here `background` and `background-size`, so this solution won't work with them). – Skippy le Grand Gourou Nov 21 '18 at 14:01

score 10 · Accepted Answer · edited Dec 08 '16 at 11:52

10

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

edited Dec 08 '16 at 11:52

GSerg

71,102
17
141
299

answered Jul 11 '13 at 22:02

G-Cyrillus

85,910
13
85
110

For anyone that wants to know, a simplified version that I went with was `display:inline-block; position: relative; background:url(cross_out.png); background-size:100% 100%;` – gtilflm Jul 11 '13 at 23:52

score 5 · Answer 3 · answered Sep 28 '16 at 04:22

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);

+1 for being the only 100% CSS solution (no SVG image background required) with the added bonus of effectively having parameterised the colors, direction and line width too! — spume, Nov 16 '18 at 17:22

score 4 · Answer 4 · answered Jul 11 '13 at 21:00

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/

dwtm.ts · Answer 5 · 2013-07-11T21:11:54.307

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.

edited Jul 11 '13 at 21:11

answered Jul 11 '13 at 21:01

dwtm.ts

654
4
16

I really like this, but it's really small (I'm only crossing out a couple characters) and in Chrome it's almost imperceptible. I tried adjusting the SVG to this ``, but it didn't change the thickness when used as a background. Ideas? – gtilflm Jul 11 '13 at 21:49
Ok, I got it to work well, but I had to put the SVG inline in the CSS for some reason. For those who are wondering, here's what I ended up with in the CSS: `background: url("data:image/svg+xml;utf8,") no-repeat scroll 0 0 / 100% 100% transparent;` – gtilflm Jul 11 '13 at 22:07
In order to save some space you might use a more compact svg/xml like the following (should do exactly the same): `` – dwtm.ts Jul 11 '13 at 22:13
New problem: My solution doesn't work in IE (of course). Anyone know about IE and inline SVG in a CSS file? – gtilflm Jul 11 '13 at 23:02
Trying to figure out why IE again behaves rude. Meanwhile, on all my browsers the linked version (```background:url(line.svg)```) works, incl. IE >= 9. What version of IE are you using and could you please check the linked version again (maybe a typo?). – dwtm.ts Jul 11 '13 at 23:22
When you use a base64 encoded version of the SVG it seems to work fine in IE: `
`. This is actually your svg as base64. – dwtm.ts Jul 11 '13 at 23:28
Not sure what the issue is, but I've gone with a different solution. (IE sucks!) – gtilflm Jul 11 '13 at 23:51

Diagonal line through
or

5 Answers5

Linked

Diagonal line through or

5 Answers5

Linked

Diagonal line through
or