title: How to create dynamic diagonal line from left-bottom to right-top corner?
body: <p>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 <code>skew</code> 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. </p>
  
  <p>Visual example: <a href="http://jsfiddle.net/6a93T/1/" rel="nofollow">http://jsfiddle.net/6a93T/1/</a></p>
  
  <p>For now I have this code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;header&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/reset.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jq.animation.js"&gt;&lt;/script&gt;
      &lt;/header&gt;
      &lt;body&gt;
          &lt;div id="preloader"&gt;
              &lt;div id="blocktop"&gt;&lt;/div&gt;
              &lt;div id="logo"&gt;&lt;/div&gt;
              &lt;div id="loadline"&gt;&lt;/div&gt;
              &lt;div id="blockbottom"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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);
  
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(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);
  
  }); 
  </code></pre>