Question

我需要创建一个对角拆分的目标网页。像这样的东西

enter image description here

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

我怎么能这样做？我应该使用帆布吗？任何建议都是受欢迎的，如果我使用帆布也可以回退。

Answer 1

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

1）在使用clip-path

的纯CSS中的现代浏览器上

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

Answer 2

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

Image map example with triangle

Answer 3

我知道这是一个古老的话题，但我自己一直在寻找解决方案，最终确定SVG是真正的跨浏览器答案。您可以直接在SVG中拥有链接。

Also on CodePen

＆＃13;

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

＆＃13;

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

＆＃13;

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

由于某些原因，Chrome不会显示＆＃34;指针＆＃34;游标，除非它被专门添加到路径CSS。

如何创建一个对角拆分的页面，这两个部分是可点击的链接

3 个答案: