我正在处理一个需要两个三角形来保存背景图像的项目，并且是链接。
这是我想要的两个三角形的模拟。
目前，我只有两个跨越900×600的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>
解决方法
如果您使用儿童图像进行链接而不是背景图像，这很简单。您只需要使用不同的变换源偏移两个.option元素，然后取消他们的子图像，并设置overflow：隐藏在.pageOption和.option元素上。支持是好的，除了IE8 / 7和Opera Mini以外的所有功能都应该工作。
结果：
HTML：
<div class='pageOption'>
<a href='#' class='option' data-inf='photo'>
<img src='../images/menuPhoto.png'>
</a>
<a href='#' class='option' data-inf='cinema'>
<img src='../images/menuCinema.png'>
</a>
</div>
相关CSS：
.pageOption {
overflow: hidden;
position: relative;
width: 40em; height: 27em;
}
.option,.option img { width: 100%; height: 100%; }
.option {
overflow: hidden;
position: absolute;
/* arctan(27 / 40) = 34.01935deg
* need to skew by 90deg - 34.01935deg = 55.98065deg
*/
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img {
transform: skewX(55.98deg);
transform-origin: inherit;
}
