Как создать страницу, которая разбита по диагонали и две половины - это кликабельные ссылки

Question

Мне нужно создать целевую страницу, которая разбита по диагонали.Примерно так:

Мне нужно, чтобы обе области страницы были активными, и в лучшем из возможных сценариев все должно динамически адаптироваться к монитору пользователя, чтобы мониторвсегда делится пополам.

Как я могу это сделать? Должен ли я использовать canvas? Любые советы приветствуются, также о возможных откатах, если я использую canvas.

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

Answer 2

Если вы говорите о HTML, вы можете использовать изображение с картой изображений

Пример карты изображений с треугольником

Answer 3

Я знаю, что это старая тема, но я сам искал решение и в итоге понял, что SVG - это настоящий кросс-браузерный ответ. Вы можете иметь ссылки непосредственно в SVG.

Также на 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.