Forums

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?

Paulie_D

The only way I can think of doing it would be by using the canvas element but I have zero javascript skills.

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 !!!

Paulie_D

Gradient....DOH! Why didn't I think of that?

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

<div id="bkgd"></div>
<div id="bkgd2"></div>

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

cnwtx

Here's a full screen diagonal line: http://jsfiddle.net/MkEJ9/1/

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.

dynamyc

@Mottie, THANKS!

erikportin

I have the same problem and haven't really come up with any good solution. The best I could do without javascript was this http://jsfiddle.net/AWGHu/ and it really doesn't look good and it's not very flexible. It kind of looks good on a retina display in some sizes.

I think I'll go for an image instead...

cnwtx

Here's one using css gradients that will stay in the corners, if the container is square, or of a known aspect ratio.

ade

Stumbled upon this when I googled the same issue:)

A technique i'm just playing with is using SVG as background image.:

background-image: url('img/bg.svg'); -o-background-size: 100% 100%; -webkit-background-size: 100% 100%;

JoniGiuro

Here's my attempt: http://zhereicome.com/experiments/statics/line/

It only works for chrome for now, because I was too lazy to add all the prefixes in the js and css.

the script:

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('width', length);
line.css('top', scrH / 2);
line.css("-webkit-transform", "scale(1) rotate(" + (-1) * angle + "deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)");

RobWierzbowski

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: 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.

gaby

You can use a diagonal (to bottom right) gradient that is very thin..

see http://jsfiddle.net/gaby/pD6Wd/

body{

    background:linear-gradient(to bottom right, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 50%,
        rgba(0,0,0,1) 50.1%,
        rgba(0,0,0,0) 50.2%,
        rgba(0,0,0,0) 100%
        );
}