如何创建一个对角分割的页面，两个半部分是可点击的链接 [英] 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

我需要页面的两个区域都是可以点击的，在最好的情况下，一切都应该适应用户的显示器，使显示器

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.

我应该如何使用canvas？如果我使用canvas，也可以使用任何建议。 b $ b

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

推荐答案

这可以通过以下几种方式实现：

This can be realized in several ways:

1）使用 clip-path的CSS

Codepen演示

strong>

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

---

浏览器，只涉及一些javascript和 2D转换

Codepen演示

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

这篇关于如何创建一个对角分割的页面，两个半部分是可点击的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！