Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Skew one corner of image

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

enter image description here

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);
}
like image 341
bartjansen Avatar asked Feb 27 '14 13:02

bartjansen


People also ask

How do you skew one side in Photoshop?

Skew. With Free Transform active, press and hold Ctrl (Win) / Command (Mac) on your keyboard to temporarily switch to Skew mode. Then click and drag a top, bottom or side handle to skew the image.


1 Answers

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

like image 90
vals Avatar answered Oct 09 '22 22:10

vals