如何创建一个对角分割的页面，两半是可点击的链接答案

【问题标题】：How to create a page that's split diagonally and the two halves are clickable links如何创建一个对角分割的页面，两半是可点击的链接
【发布时间】：2012-04-16 23:15:41
【问题描述】：

我需要创建一个对角分割的着陆页。像这样的

我需要页面的两个区域都是可点击的，并且在最好的情况下，一切都应该动态地适应用户的监视器，以便监视器总是分成两半。

我该怎么做？我应该使用画布吗？欢迎提供任何建议，如果我使用画布，也可能出现后备问题。

【问题讨论】：

我已经这样做了，我会在几个小时后挖掘sn-p。但我需要一个赏金他他
页面应该如何分割？，是否需要不同的颜色？
@Starx 它应该被对角分割，一部分是黑色的，一部分是白色的。正如我所说，它应该将页面分成两部分
而你不在乎，这些白色和黑色区域下面是什么，只是可点击的链接吧？
@Starx 是的，差不多就是这样！

标签： css html html5-canvas

【解决方案1】：

这可以通过多种方式实现：

1) 在纯 CSS 的现代浏览器上使用 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) 在较新的浏览器上，只涉及一点 javascript 和 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');
});

【讨论】：

@NicolasPeluchetti 4 年后我可以更改我的答案以便不涉及 javascript 吗？
vh 和 vw 在 android

【解决方案2】：

假设您在谈论 HTML，您可以使用带有图像映射的图像

Image map example with triangle

【讨论】：

OP 是在讨论拆分页面，而不是图像。
我说的是拆分页面，带有地图的图像将是最后的后备
@Starx：实际上只有一张图片有两种颜色。图像地图用于有2个可点击区域的
@barts，首先，您没有提供答案，您给出了RTFM建议，下一页和图像是两个不同的东西，这可能是他所说的最后手段。

【解决方案3】：

我知道这是一个老话题，但我自己一直在寻找解决方案，最终发现 SVG 是真正的跨浏览器答案。您可以直接在 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>

此解决方案适用于现代浏览器、Edge 和 IE11。我没有测试任何旧版浏览器。

由于某种原因，Chrome 不会显示“指针”光标，除非它专门添加到路径 CSS。

【讨论】：