三角形形状与背景图像

Question

我正在一个项目中，该项目需要两个三角形来保存背景图像并成为链接。

这是我模拟两个三角形的方式。

三角形与背景图像

目前，我只有两个div，它们跨越900x600，每个三角形都作为背景图像。我现在遇到的问题是我无法将鼠标悬停在Cinema div的透明部分上才能到达photo 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>

Answer 1

这是我的CSS建议：使用的是HTML5标签而不是跨浏览器的画布。使用SVG。（最可靠的一个）使用CSS3旋转过渡，并用隐藏的溢出将其覆盖。再次是不跨浏览器。旋转过渡：-webkit-transform: rotate(7.5deg);&nbsp; /* Saf3.1+, Chrome&nbsp;&nbsp; &nbsp;-moz-transform: rotate(7.5deg);&nbsp; /* FF3.5+&nbsp;&nbsp; &nbsp; -ms-transform: rotate(7.5deg);&nbsp; /* IE9&nbsp;&nbsp; &nbsp; &nbsp;-o-transform: rotate(7.5deg);&nbsp; /* Opera 10.5&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(7.5deg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');