Kształt trójkąta z obrazem tła

Pracuję nad projektem, który wymaga dwóch trójkątów do przechowywania obrazów tła i łączy.

Oto moja makieta na to, jak chciałbym mieć dwa trójkąty.

Obecnie mam tylko dwa div, które obejmują 900x600 z każdym trójkątem jako obraz tła. Problem, który mam teraz, to fakt, że nie mogę zatrzymać kursora nad przezroczystą częścią div Cinema, aby dotrzeć do zdjęcia div.

Czy mogę wykonać ten projekt za pomocą trójkątów css3 i ustawić ich obrazy tła? Zawsze myślałem, że niestandardowy kształt składa się z granicy z kolorem obramowania.

Czy można zrobić z trójkątami css3, a jeśli tak, to czy ktoś może mi pomóc z kodem?

Oto, co mam obecnie.

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

questionAnswers(4)

yourAnswerToTheQuestion