Grow your CSS skills. Land your dream job.

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 5:17 pm

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

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

    # August 28, 2011 at 6:10 am

    @Mottie, THANKS!

    # January 13, 2012 at 11:53 am

    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…

    # January 13, 2012 at 1:56 pm

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

    ade
    # November 12, 2012 at 6:58 am

    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%;

    # November 12, 2012 at 9:13 am

    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)”);

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

    # March 28, 2013 at 7:33 pm

    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%
    );
    }

Viewing 10 posts - 16 through 25 (of 25 total)

You must be logged in to reply to this topic.

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