Estoy trabajando en un proyecto que requiere dos triángulos para contener imágenes de fondo y ser enlaces.

Aquí está mi maqueta de cómo me gustaría los dos triángulos.

Actualmente, solo tengo dos divs que abarcan el 900x600 con cada triángulo como imagen de fondo. El problema que tengo ahora es que no puedo desplazarme sobre la parte transparente de la división Cinema para acceder a la división de fotos.

¿Puedo realizar este diseño con triángulos css3 y configurar sus imágenes de fondo? Siempre pensé que la forma personalizada se compone de un borde, con un color de borde.

¿Es posible hacerlo con los triángulos css3 y, si es así, alguien puede ayudarme con el código?

Esto es lo que tengo actualmente.

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