我正在研究一个需要两个三角形来保存背景图像并成为链接的项目。
这是我想要两个三角形的模型。
目前,我只有两个跨越 900x600 的 div,每个三角形作为背景图像。我现在遇到的问题是我无法将鼠标悬停在 Cinema div 的透明部分上以到达照片 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>