csshtmlhtml5-canvas

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.

Solution

  • 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>