三角形形状与背景图像

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);  /* Saf3.1+, Chrome 

   -moz-transform: rotate(7.5deg);  /* FF3.5+ 

    -ms-transform: rotate(7.5deg);  /* IE9 

     -o-transform: rotate(7.5deg);  /* Opera 10.5 

        transform: rotate(7.5deg);

           filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 

                   M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');