The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

diagonal line

  • # August 24, 2011 at 11:03 am

    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…

    # August 24, 2011 at 12:42 pm want a diagonal line on the upper left and another on the bottom right?

    # August 25, 2011 at 5:17 am

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

    # August 25, 2011 at 7:31 am

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

    # August 25, 2011 at 12:47 pm

    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(
    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%
    # August 25, 2011 at 1:55 pm

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

    @dynamyc and

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

    # August 25, 2011 at 2:49 pm

    Thanks for the ideas !!!

    # August 25, 2011 at 4:48 pm

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

    # August 25, 2011 at 4:59 pm

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

    # August 25, 2011 at 5:01 pm

    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.

    # August 26, 2011 at 7:57 am

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

    # August 26, 2011 at 12:10 pm

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

    # August 26, 2011 at 7:16 pm

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



    #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;
    #bkgd2 {
    right: 1px;
    border-color: transparent transparent white white;


    var w = $(window),
    b = $('#bkgd, #bkgd2');

    var fixbkgd = function(){
    var x = w.width() + 'px ',
    y = w.height() + 'px ';
    'border-width' : y + x

    # August 26, 2011 at 11:16 pm

    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!

    # August 26, 2011 at 11:17 pm

    he said one diagonal line.

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed