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

Assuming you are talking about HTML you can use an image with an image map

Image map example with triangle

Answer 2

This can be realized in several ways:

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

Codepen Demo

HTML

<div>
   <a href="#1"></a>
   <a href="#2"></a>
</div>

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

<div>
    <section><a href="#1"></a></section>
    <section><a href="#2"></a></section>
</div>

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

Answer 3

I know this is an old topic, but I was looking for a solution myself and ended up figuring out that SVG is the real, cross-browser answer. You can have links directly in the SVG.

Also on CodePen

html, body {
  margin: 0;
}
div {
  position: absolute;
  width: 100%;
  height: 100%;
}
svg {
  display: block;
  width: 100%;
  height: 100%;
}
svg > a:first-child > path {
  cursor: pointer;
  fill: #ccc;
}
svg > a:last-child > path {
  cursor: pointer;
  fill: #999;
}

<div>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
    <a href="#1"><path d="M 0 0 L 100 100 L 100 0 z"></path></a>
    <a href="#2"><path d="M 100 100 L 0 100 L 0 0 z"></path></a>
  </svg>
</div>

This solution works in modern browsers, Edge, and IE11. I didn't test any older browsers.

For some reason Chrome will not show the "pointer" cursor unless it is specifically added to the path CSS.