Skew one corner of image

Question

I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:

In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).

 background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);

Fiddle: http://jsfiddle.net/3eX5j/

My code is:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: skew(-45deg);
}

Icterus

Do you want a pure CSS3 solution? – Caxton

I would like to stick as close to pure CSS3 as possible – Icterus

I don't have a lot of time, but it seems possible. This is what you want, isn't it? It's a quick hack based on this MDN page on perspective. I know it needs work, sorry. – Phantom

Answer 1

All you need to do is to think in 3d:

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-origin: left center;
}

fiddle

explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.

See how can be controlled what is the final size

fiddle with multiple options

Hourglass

@Kroltan Thanks ! Happy that you like it ! – Hourglass

there's just one problem with this solution, because it increases the width of the image, rather than decreasing it (in the bottom). any idea how to accomplish this whilst maintaining the width? – Icterus

Play with the point where you apply the transform. Added example. (with un-transformed div to compare) – Hourglass