Skew DIV from right

Question

Is it possible to skew a div from its right edge? When I use transform:skew(XXdeg) it always skews it from the center.

I am trying to align two divs next to each other: one skewed and the other one without any transformation. Basically it should look like as a book with lifted cover - so the two divs must meet at the center (skewed touching on the right edge, transformless touching on the left edge). Any ideas? Thanks!

Answer 1

You could use transform-origin

transform-origin is not fully supported and you may need to use vendor prefixes to get them to work with some browsers.

To skew 45º from the left you could use something like this:

transform-origin: 100% 100%; /* you can use pixels instead */
transform:        skew(45deg);

Again, you may need vendor prefixes to make it work with all browsers.