Forma de triângulo com imagem de fundo
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>