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

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

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

    @dynamychttp://jsfiddle.net/e9eUU/ and http://jsfiddle.net/x3sme/

    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)

    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();
    # 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.

*May or may not contain any actual "CSS" or "Tricks".