Ich arbeite an einem Projekt, in dem zwei Dreiecke als Hintergrundbild und als Verknüpfungen benötigt werden.

Hier ist mein Modell dafür, wie ich die beiden Dreiecke haben möchte.

Derzeit habe ich nur zwei Divs, die 900x600 mit jedem Dreieck als Hintergrundbild überspannen. Das Problem, das ich jetzt habe, ist, dass ich nicht über den transparenten Teil der Cinema Div schweben kann, um die Photo Div zu erreichen.

Kann ich dieses Design mit CSS3-Dreiecken durchführen und deren Hintergrundbilder festlegen? Ich dachte immer, dass die benutzerdefinierte Form aus einem Rand mit einer Randfarbe besteht.

Ist es möglich, mit CSS3-Dreiecken zu arbeiten, und wenn ja, kann mir jemand mit dem Code helfen?

Folgendes habe ich derzeit.

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