Question

I have a practical use for the CSS3 skewX property. I have written a simple image accordian-like script with jQuery. Images are skewed (already, not in CSS) as part of the design and in order to make the correct areas clickable, the containing divs need to be skewed.

The problem is that in skewing the div, the image is skewed aswell. Skewing a skewed image does not look good.

One solution I’ve tried is resetting the skewX value to 0deg on the image, but to no avail. In the fiddle, I haven’t included the accordian as this isn’t necessary to the solution.

http://jsfiddle.net/yM49N/2/

<div><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"></div>

div {
    -webkit-transform:skewX(200deg);
       -moz-transform:skewX(200deg);
         -o-transform:skewX(200deg);
        -ms-transform:skewX(200deg);
            transform:skewX(200deg);
    border:1px solid red;
}

Answer 1

You can apply an inverted skewX on img:

img {
    -webkit-transform: skewX(-200deg);
       -moz-transform: skewX(-200deg);
         -o-transform: skewX(-200deg);
        -ms-transform: skewX(-200deg);
            transform: skewX(-200deg);
}

To make the div contain the image properly, you also need to add overflow: hidden.

http://jsfiddle.net/thirtydot/yM49N/3/