19

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);
}
09stephenb
  • 9,358
  • 15
  • 53
  • 91
bartjansen
  • 203
  • 1
  • 2
  • 7
  • Do you want a pure CSS3 solution? – Zword Feb 27 '14 at 13:20
  • I would like to stick as close to pure CSS3 as possible – bartjansen Feb 27 '14 at 13:44
  • I don't have a lot of time, but it seems possible. [This](http://jsfiddle.net/MrLister/8QhBb/2/) is what you want, isn't it? It's a quick hack based on [this MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective) on perspective. I know it needs work, sorry. – Mr Lister Feb 27 '14 at 13:55

1 Answers1

42

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

The Pragmatick
  • 5,379
  • 27
  • 44
vals
  • 61,425
  • 11
  • 89
  • 138
  • @Kroltan Thanks ! Happy that you like it ! – vals Feb 27 '14 at 14:20
  • 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? – bartjansen Feb 27 '14 at 14:49
  • 2
    Play with the point where you apply the transform. Added example. (with un-transformed div to compare) – vals Feb 27 '14 at 15:00