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

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

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.