0

是否可以使用旋转 45 度的 div 作为包含 img 的图像或 div 的掩码（alpha）？

http://i.stack.imgur.com/X2G9f.jpg

4

3 回答 3

2

为什么不将内部元素旋转 -45 度？

div.mask {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg); 
}

div.mask img {
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg); 
}

subhaze 提供的示例JSFiddle -这里

于 2012-11-29T04:33:04.693 回答
1

如果您可以使用 Jquery 插件，这将满足您的需求jqueryrotate
这非常易于使用，您不需要暗示任何 CSS，它也是跨浏览器。

于 2012-11-29T04:36:36.740 回答
0

您可以使用 CSStransform属性。

参考这个：http ://davidwalsh.name/css-transform-rotate

于 2012-11-29T04:30:33.037 回答