Я работаю над проектом, который требует, чтобы два треугольника содержали фоновые изображения и были ссылками.
Вот мой макет того, как мне бы хотелось сделать из двух треугольников.
В настоящее время у меня есть только два блока div размером 900x600
с каждым треугольником в качестве фонового изображения. Проблема, с которой я столкнулся сейчас, заключается в том, что я не могу навести указатель мыши на прозрачную часть div Cinema, чтобы добраться до div фотографии.
Могу ли я выполнить этот дизайн с помощью треугольников css3 и установить для них фоновые изображения? Я всегда думал, что нестандартная форма состоит из границы с цветом границы.
Можно ли делать это с треугольниками css3, и если да, то может ли кто-нибудь помочь мне с кодом?
Вот что у меня сейчас есть.
.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>
Свободный перевод вопроса Triangle shape with background image от участника @Ryan.