How to create a page that's split diagonally and the two halves are clickable links

Question

I need to create a landing page that\'s split diagonally. Something like this

Answer 1

This can be realized in several ways:

1) on modern browsers in pure CSS using clip-path

Codepen Demo

HTML

CSS

a { 
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: block;
}

a:first-child {
    -webkit-clip-path: polygon(0 0, 0 100vh, 100% 100vh);
    clip-path: polygon(0 0, 0 100vh, 100% 100vh);
    background: #d6d6d6;
}

a:last-child {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100vh);
    clip-path: polygon(0 0, 100% 0, 100% 100vh);
    background: #212121;
}

---

2) On less recent browsers, involving only a bit of javascript and 2D Transformation

Codepen Demo

HTML

CSS

html, body, div{ height: 100%; width: 100%; padding: 0; margin: 0; }
div { overflow : hidden; position: relative;  }

section { 
    position      : absolute;
    top           : -100%;
    height        : 500vw;
    width         : 500vh;
    background    : #ccc; 
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

section + section {
    background    : #333;    
    top           : 0%;
}

section a { display: block; width: 100%; height: 100%; cursor: pointer; }

Js/jQuery:

$(function() {

   $(window).on('resize', function() {
       var h = $(document).height(),
           w = $(document).width(); 

      /*  Math.atan() function returns the arctangent (in radians) 
       *  of a number and 1 rad ~= 57.29577 deg 
       */
       var angle = Math.atan(h/w) * 57.29577;
       var rotateProperty = "rotate(" + angle + "deg)";

       $('section').css({
          "-webkit-transform": rotateProperty,
          "-moz-transform": rotateProperty,
          "transform": rotateProperty
       });

   })
   .triggerHandler('resize');
});