# January 13, 2012 at 11:53 am
I think I’ll go for an image instead…# November 12, 2012 at 9:13 am
Here’s my attempt:
It only works for chrome for now, because I was too lazy to add all the prefixes in the js and css.
scrW = $(window).width();
scrH = $(window).height();
angle = (Math.atan(scrH / scrW)) * (180/3.14);
var line = $(‘#line’);
var length = Math.sqrt(( scrW * scrW) + (scrH * scrH ));
line.css(‘left’, ( -1 ) * ((length – scrW) / 2) );
line.css(‘top’, scrH / 2);
line.css(“-webkit-transform”, “scale(1) rotate(” + (-1) * angle + “deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)”);# December 6, 2012 at 1:34 pm
If you’re ok with a css3 requirement, you can create an oversized image with a diagonal line from one corner to the other, and then apply as a fixed background on an element with [background size](https://developer.mozilla.org/en-US/docs/CSS/background-size): 100% 100%. One quibble is the line thickness will change depending on the pixel size of the viewport, but during a single session that won’t be noticeable.
You must be logged in to reply to this topic.