before css 旋转_在纯CSS中旋转的图像后面的纯背景

Is there a way i can draw the black "background" behind the image using pure CSS ?

I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I have also tried using shadows, but the final result is not similar what i am trying to achieve.

Scope and requirements:

Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.

Before answering:

I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!

Here is a fiddle and the code below.

img {

position: absolute;

top: 100px;

left: 100px;

-webkit-transform-origin: center left;

-moz-transform-origin: center left;

-ms-transform-origin: center left;

-o-transform-origin: center left;

transform-origin: center left;

-webkit-transform: rotate(-2deg);

-moz-transform: rotate(-2deg);

-ms-transform: rotate(-2deg);

-o-transform: rotate(-2deg);

transform: rotate(-2deg);

}

img:before {

background: #000;

-webkit-transform-origin: center left;

-moz-transform-origin: center left;

-ms-transform-origin: center left;

-o-transform-origin: center left;

transform-origin: center left;

-webkit-transform: rotate(-4deg);

-moz-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

-o-transform: rotate(-4deg);

transform: rotate(-4deg);

width: 300px;

height: 300px;

content: ".";

}

解决方案

It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/

Added a div (sorry :-)