Eu estou trabalhando em um projeto que pede dois triângulos para armazenar imagens de fundo e ser links.

Aqui está a minha simulação de como eu gostaria dos dois triângulos.

Atualmente, tenho apenas dois divs que abrangem os 900 x 600 com cada triângulo como uma imagem de plano de fundo. A questão que estou tendo agora é que eu não posso pairar sobre a parte transparente do Cinema div para alcançar a foto div.

Posso realizar esse design com triângulos css3 e definir suas imagens de plano de fundo? Eu sempre achei que a forma personalizada é composta de uma borda, com uma cor de borda.

É possível fazer com triângulos css3, e se assim for, alguém pode me ajudar com o código?

Aqui está o que eu tenho atualmente.

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