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

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

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

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

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

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

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

.pageOption { позиция: относительная; ширина: 900 пикселей; высота: 600 пикселей; } .pageOption .photo { позиция: абсолютная; верх: 0px; слева: 0px; ширина: 900 пикселей; высота: 600 пикселей; background: url('../images/menuPhoto.png') без повтора 0 0; } .pageOption .cinema { позиция: абсолютная; внизу: 0px; справа: 0 пикселей; ширина: 900 пикселей; высота: 600 пикселей; background: url('../images/menuCinema.png') без повтора 0 0; }