diagonal line

[dynamyc]

I’m wondering how to draw a diagonal line between opposite corners of the browser window?
Or it’s more simple to make a diagonal line in photoshop and then put it as a background, but the problem if the diagonal line will look perfect in every screen size and browser…

[chrisburton]

Soo..you want a diagonal line on the upper left and another on the bottom right?

[dynamyc]

No, a diagonal line from upper left to bottom right.

[tristanzimmerman]

What about something like this with a CSS gradient? You could tighten up the black so that it’s very thin and there isn’t much of a fade between the two yellow sections in the example below.

background-image: -webkit-gradient(

linear,

left bottom,

right top,

color-stop(0.07, #FFFF00),

color-stop(0.5, #000000),

color-stop(1, #FFFF00)

);

background-image: -moz-linear-gradient(

left bottom,

#FFFF00 7%,

#000000 50%,

#FFFF00 100%

);

[chrisburton]

@tristanzimmerman – you have the right idea with using gradients, however, he wants a diagonal line.

@dynamyc – http://jsfiddle.net/e9eUU/ and http://jsfiddle.net/x3sme/

You can also use an image for fallback if you’d like.

[dynamyc]

Thanks for the ideas !!!

[dynamyc]

@ChristopherBurton now I’m wondering how to make just one diagonal line to fit perfectly both left top and right bottom…

[chrisburton]

You mean so only 1 goes from corner to corner?

I spoke about this on Twitter and according to Tab Atkins & Lea Verou it isn’t currently possible with CSS gradients.

[dynamyc]

Yes, 1 goes from corner to corner, ah thanks anyway!

[chrisburton]

@dynamyc – It’s possible with javascript as Tab has said.

[Mottie]

Maybe try something like this… with a minimal amount of scripting (I used jQuery here)

HTML

CSS

#bkgd, #bkgd2 {

position: absolute; /* use fixed to keep it in place */

bottom: 0;

right: 0;

width: 0;

height: 0;

border: solid;

border-color: transparent transparent black black;

z-index:-2;

}

#bkgd2 {

right: 1px;

border-color: transparent transparent white white;

z-index:-1;

}

jQuery

var w = $(window),

b = $('#bkgd, #bkgd2');



var fixbkgd = function(){

var x = w.width() + 'px ',

y = w.height() + 'px ';

b.css({

'border-width' : y + x

});

}



w.resize(fixbkgd);

fixbkgd();

[seb_z_lite]

what about a css transform:rotate? with an old-school

---

tag? man, If Nicolas Gallagher can do a whole set of icons only with css, this has to be possible with Css!

[seb_z_lite]

he said one diagonal line.

[chrisburton]

@Mottie – Nice!

@seb_z_lite – It’s not that simple. Trust me, if anyone would know the answer, it would be those two (Lea Verou & Tab Atkins).

[chrisburton]

@cnwtx – It needs to hit the corners of the browser and stay that way when resizing. At this point it will only work with javascript.

[Author]

Posts