Div inside rotated div

Question

Is it possible to use a div, rotated 45 degrees, as mask(alpha) for image or div containing img?

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

Answer 1

Why not just rotate the inner element by -45 degrees?

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); 
}

Example JSFiddle provided by subhaze - here

Answer 2

If you can use Jquery plugin this would do what you need jqueryrotate
this is very easy to use and you dont need to imply any css and it is cross browser too.

Answer 3

You may CSS transform property.

Refer this: http://davidwalsh.name/css-transform-rotate