CODEWITHSUNDEEP
csshtmlhtml5-canvas
Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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

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

enter image description here

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

How could i do it?Should i use canvas?Any advice is welcome, also on possible fallbacks if i use canvas.

Upvotes: 4

Views: 9785

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

This can be realized in several ways:

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

a { 
    position: absolute;
    inset: 0;
}

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

a:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: #212121;
}
<div>
   <a href="#1"></a>
   <a href="#2"></a>
</div>

  1. With a bit of javascript and 2D Transformation

const dde = document.documentElement;

function splitDiagonally() {
   
   const h = dde.offsetHeight;
   const w = dde.offsetWidth; 

  /*  Math.atan() function returns the arctangent (in radians) 
   *  of a number and 1 rad ~= 57.29577 deg 
   */
   const angle = Math.atan(h / w) * 57.29577;
   dde.style.setProperty('--rotateZ', `${angle}deg`);
}


window.addEventListener('resize', splitDiagonally);

splitDiagonally();
html, body, div { 
   height: 100%; 
   width: 100%; 
   padding: 0; 
   margin: 0; }


div { 
   overflow : hidden; 
   position: relative;  }


section { 
    position      : absolute;
    height        : 1000vmax;
    width         : 1000vmax;
    transform     : translateY(var(--translateY, 0)) rotateZ(var(--rotateZ, 0deg));
    transform-origin: 0 0;
}

section:first-child {
    background    : #333;    
    --translateY  : -100%;
}

section:last-child {
    --translateY  : 0;
    background    : #ccc; 
}


section a { 
   display: block; 
   width: 100%; 
   height: 100%; 
   cursor: pointer; 
}
<div>
    <section><a href="#1"></a></section>
    <section><a href="#2"></a></section>
</div>

Upvotes: 5

CaptainVascular
CaptainVascular

Reputation: 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;
}
<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.

Upvotes: 0

bart s
bart s

Reputation: 5100

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

Image map example with triangle

Upvotes: 1

Related Questions