How to create dynamic diagonal line from left-bottom to right-top corner?

javascript jquery dynamic responsive-design diagonal

10,422

Solution 1

Use trigonometry to compute the desired angle:

var angle = Math.atan2($(window).width(),$(window).height()); // in radians
$('#blocktop,#blockbottom').css('transform','skew(-'+angle+'rad)');

(Note for math geeks and other pedants: the arctangent would normally take the height divided by the width, not the other way around. In this case, however, we're skewing a vertical line instead of a horizontal one, so the above code gives the desired result.)

Note that newer versions of jQuery will automatically add the necessary -webkit- or -moz- prefix to that CSS transform property.

You might also want to display:none the elements until the above code can alter the angle, and then show() them immediately after the angle is computed:

$('#blocktop,#blockbottom').css('transform', 'skew(-' + angle + 'rad)')
    .add('#logo').show();

http://jsfiddle.net/mblase75/6a93T/10/

Solution 2

I just use the fact that a DOM-Element with two different border for top and right results in a diagonal line where both meet. Then put the height and width of the DOM-Element to zero and set the border-top-width to window-height and the border-right-width to window-width. Update it with JavaScript on resize... That's all.

I've put a container in the DOM

<div id="diagonal_outer"><div id="diagonal"></div></div>

Following CSS is nessesary

div#diagonal_outer {
    position: fixed !important;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -100;
}
div#diagonal {
    position: relative;

    border-color: #FAE9E1 #ffffff;
    border-style: solid;
    border-left-width: 0;       
    border-top-width: 10240px;
    border-right-width: 12800px;
    border-bottom-width: 0;

    height: 0;
    width: 0;

    left: 50%;
    top: 50%;
    margin-left: -6400px; /* half of border-right-width */
    margin-top: -5120px; /* half of border-top-width */

    z-index: -100;
}

and following JavaScript to actualize on resize

jQuery(document).ready(function() {
    diagonal();
});

jQuery(window).resize(function() {
    diagonal();
});

var diagonal = function() {
    var wWidth = jQuery(window).width();
    var wHeight = jQuery(window).height();

    jQuery('#diagonal').css('left', 0);
    jQuery('#diagonal').css('top', 0);
    jQuery('#diagonal').css('margin-left', 0);
    jQuery('#diagonal').css('margin-top', 0);

    jQuery('#diagonal').css('border-right-width', wWidth);
    jQuery('#diagonal').css('border-top-width', wHeight);
};

OK, the solution with CSS-skew is nice, but this one works with CSS <3

Solution 3

You don't have to do too much for this. See demo here

HTML

<div class="diagonal"></div>

CSS

.diagonal {
    width: 0; 
    height: 0; 
    border-top: 110px solid transparent;
    border-right:110px solid blue; 
}

10,422

Author by

Daniel Ramirez-Escudero

I’m a web designer and developer based in Amsterdam, but I also work for international projects. My objective is to create a connection between your idea and your people. I will listen and customize your concept to successfully communicate your message. For more information please visit my portfolio: http://www.escuderodesign.com/

Updated on July 28, 2022

Comments

Daniel Ramirez-Escudero almost 2 years

I've created a simple layout where I have three divs which interact. One is the logo in the middle of the screen and the other are two blocks which with jQuery are moved out of the screen. I used the skew option from CSS to apply a degree transformation. I would like to apply the certain degree depending on the screen, so this degree will apply to all screens correctly.

Visual example: http://jsfiddle.net/6a93T/1/

For now I have this code:

HTML:

<html>
    <header>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/jq.animation.js"></script>
    </header>
    <body>
        <div id="preloader">
            <div id="blocktop"></div>
            <div id="logo"></div>
            <div id="loadline"></div>
            <div id="blockbottom"></div>
        </div>
    </body>
</html>

CSS:

html{
    overflow: hidden;
}


#preloader{
    width: 100%;
    height: 100%;
}

#logo{
    background-image: url('../img/logotest.png');
    width: 300px;
    height: 300px;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    z-index: 1000;
}


#blocktop{
    background-color: #fff4ed;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -50%;
    z-index: 10;

    transform: skew(-45deg);
     -o-transform: skew(-45deg);
     -moz-transform: skew(-45deg);
     -webkit-transform: skew(-45deg);
}

#blockbottom{
    background-color: #ff7f33;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: -50%;

    transform: skew(-45deg);
     -o-transform: skew(-45deg);
     -moz-transform: skew(-45deg);
     -webkit-transform: skew(-45deg);

}

jQuery:

$(document).ready(function(){

    /*$("button").click(function() */
        setTimeout(function(){

        $("#blocktop").animate({
        left: '-120%',
        opacity: '0'},
        800
      );

        $("#blockbottom").animate({
        right: '-120%',
        opacity: '0'},
        800
      );


        $('#logo').fadeOut('700')
    },2000);

});

Blazemonger over 11 years

Updated to account for the actual behavior of skew.
Blazemonger over 11 years

But can it animate? Your demo does not.
Blazemonger over 11 years

Turns out you can feed skew either radians or degrees -- boy, does that simplify things.
algorhythm over 11 years

@Blazemonger Yes it's possible. Just use the CSS-properties I set in the JS-function 'diagonal' to animate.
Daniel Ramirez-Escudero over 11 years

@algorhythm Thanks for the nice answer, to understand it better I would like to know the reason why is there -1 at the end of each variable: var wHeight = jQuery(window).height() -1; The rest I more or less understand.
algorhythm over 11 years

@DanielRamirez-Escudero You can leave the -1 away, in older jQuery versions the $(window).width() function gives not the correct value in some browsers. I optimized that fact by subtracting 1. It's not nessesary.
dbtek over 10 years

That's really a nice answer.
Daniel Ramirez-Escudero almost 10 years

@Wolf I like your CSS only input, but the line with the color should only be in the middle, not have the screen split with two colors.
Shniper about 8 years

@Blazemonger I copied the exact code from your example but my triangle is not at the proper angle. prntscr.com/b5mno6 Any idea why this is?
Blazemonger about 8 years

@Shniper I can't offer any suggestions if you only provide a screenshot instead of source code.
Eric McWinNEr over 6 years

Very nice answer bro