Треугольная форма фонового изображения

Question

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

Вот мой макет того, как мне бы хотелось сделать из двух треугольников.

В настоящее время у меня есть только два блока div размером 900x600 с каждым треугольником в качестве фонового изображения. Проблема, с которой я столкнулся сейчас, заключается в том, что я не могу навести указатель мыши на прозрачную часть div Cinema, чтобы добраться до div фотографии.

Могу ли я выполнить этот дизайн с помощью треугольников css3 и установить для них фоновые изображения? Я всегда думал, что нестандартная форма состоит из границы с цветом границы.

Можно ли делать это с треугольниками css3, и если да, то может ли кто-нибудь помочь мне с кодом?

Вот что у меня сейчас есть.

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}
.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}
.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

<div class="pageOption">
  <a href="#" class="option photo" id="weddingPhoto"></a>
  <a href="#" class="option cinema" id="weddingCinema"></a>
</div>

_{Свободный перевод вопроса Triangle shape with background image от участника @Ryan.}

Answer 1

Это действительно просто, если вы используете дочерние изображения для ссылок вместо фоновых изображений.
Вам просто нужно наклонить два элемента .option с разными transform origins, затем открутить (unskew) их дочерние изображения и установить overflow: hidden как для элементов .pageOption, так и для элементов .option.
Поддержка хорошая, должно работать для всего, кроме IE8 / 7 и Opera Mini.

DEMO

Result:

body { background: gainsboro; }
.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img { opacity: .75; transition: .5s; }
.option img:hover { opacity: 1; }
.option img, .option:after {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}
.option:after {
  position: absolute;
  margin: .5em 1.65em;
  color: white;
  font: 500 1.25em Courier;
  letter-spacing: .1em;
  text-transform: uppercase;
  content: attr(data-inf);
}
.option:first-child:after { top: 0; left: 0; }
.option:last-child:after { right: 0; bottom: 0; }

<div class='pageOption'>
  <a href='#' class='option' data-inf='photo'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2009-28-b-large_web.jpg'>
  </a>
  <a href='#' class='option' data-inf='cinema'>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>
  </a>
</div>

_{Свободный перевод ответа от участника @Ana автора.}

Answer 2

Идея адаптивной версии с использованием CSS clip-path

.pageOption {
  height: 100vh;
  position: relative;
}

.pageOption .photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 5px;
  bottom: 5px;
  background: url('https://picsum.photos/id/1068/900/900') center/cover;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.pageOption .cinema {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 0;
  bottom: 0;
  background: url('https://picsum.photos/id/1055/900/900') center/cover;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.pageOption a:hover {
  filter:grayscale(1);
}

body {
  margin: 0;
}

<div class="pageOption">
  <a href="#" class="option photo" ></a>
  <a href="#" class="option cinema"></a>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 3

Этого макета можно добиться несколькими способами. Вот пример использования встроенного svg и элемента clip-path:

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/>
  <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/>
</svg>

_{Свободный перевод ответа от участника @web-tiki.}

БЛОГ НА HUSL

Треугольная форма фонового изображения

Ответы (3 шт):

DEMO