Give help. Get help.

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

    # August 26, 2011 at 11:25 pm

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

    # August 27, 2011 at 6:11 pm

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

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

You must be logged in to reply to this topic.