How to create a page that is diagonally divided, and the two halves are clickable links

Question

I need to create a landing page that is split diagonally. Something like that

I need both areas of the page to be clickable, and in the best possible scenario, everything should dynamically adapt to the user's monitor so that the monitor is always split in half.

How can i do this? Should I use canvas? Any advice is appreciated, as well as possible backups if I use canvas.

Answer 1

This can be implemented in several ways:

1) in 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) In lesser browsers containing 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 2

Assuming you're talking about HTML, you can use an image with an image map

Triangle map example

Answer 3

I know this is an old topic, but I myself was looking for a solution and eventually found out that SVG is a real cross-browser answer. You can have links directly to SVG.

Also in 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 have not tested old browsers.

For some reason, Chrome won’t show the “cursor” cursor unless it’s specifically added to the CSS path.