与背景图像的三angular形状

我正在做一个项目，要求两个三angular形来保存背景图像，并成为链接。

这是我的模拟如何我想要两个三angular形。

目前，我只有两个跨越900×600的div，每个三angular形作为背景图片。 我现在遇到的问题是我不能将鼠标hover在Cinema div的透明部分上，以达到照片div。

我可以用css3三angular形完成这个devise，并设置它们的背景图像吗？ 我一直认为自定义形状是由边框组成的，边框颜色。

是否有可能做css3三angular形，如果是的话，有人可以帮我的代码？

这是我目前有的。

.pageOption { position: relative; width: 900px; height: 600px; } .pageOption .photo { position: absolute; top: 0px; left: 0px; width: 900px; height: 600px; background: url('..http://img.dovov.commenuPhoto.png') no-repeat 0 0; } .pageOption .cinema { position: absolute; bottom: 0px; right: 0px; width: 900px; height: 600px; background: url('..http://img.dovov.commenuCinema.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

如果您使用链接而不是背景图片的孩子图像真的很容易。 您只需要将两个.option元素歪斜为不同的转换起点，然后将其子图像去掉并设置overflow: hidden在.pageOption和.option元素上。 支持是好的，应该为除IE8 / 7和Opera Mini以外的所有应用程序工作。

DEMO

结果 ：

HTML ：

 <div class='pageOption'> <a href='#' class='option' data-inf='photo'> <img src='..http://img.dovov.commenuPhoto.png'> </a> <a href='#' class='option' data-inf='cinema'> <img src='..http://img.dovov.commenuCinema.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; } 

Answer 2

这是我的CSSbuild议：

1. 使用HTML5标签而不是跨浏览器的canvas 。
2. 使用SVG 。 （最可靠的）
3. 使用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'); 

Answer 3

您可以通过几种方法来实现这种布局。 这是一个使用内联svg和剪辑path元素的例子：

 <svg viewbox="0 0 10 6.7"> <defs> <clipPath id="top"> <polygon points="0 0, 9.9 0, 0 6.6" /> </clipPath> <clipPath id="bottom"> <polygon points="10 0.1, 10 6.7, 0.1 6.7" /> </clipPath> </defs> <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/> <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/> </svg> 

Answer 4

正如你所说，css3 tringles由边界组成，所以你不能把背景附加到它们。

我build议你只要使用两个PNG，并使用js来监听点击事件，并根据鼠标位置创build正确的动作。

还有一个webkit的面具的CSS属性，但它在其他浏览器非常不受支持（我用它的一个小页面起跳技巧 – http://jsfiddle.net/xTNTH/3/ – 最好的Safari浏览器[没有js只有css] – 7fRNq.jpg ）