Question

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

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

Answer 1

为什么不将内部元素旋转-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 - here

Answer 2

如果你可以使用Jquery插件，你可以做你需要的jqueryrotate这很容易使用，你不需要暗示任何CSS，它也是跨浏览器。

Answer 3

您可以使用CSS transform属性。

请参阅：http://davidwalsh.name/css-transform-rotate

Div内旋转div

3 个答案: