(CSS) skew img frame without distorting image

Question

I'm making a website that contains many skewed elements, like this:

This isn't too bad, there are CSS transforms that could skew it. But how about this:

The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?

Solution 1

I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.

Demo: http://codepen.io/antibland/pen/eZKxNa

Solution 2

I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.

HTML

<div class="skewed">
  <img src="images/sad-kid.jpg">
</div>

CSS

div.skewed {
  position: relative;
  height: 140px;
  transform: skew(-2deg) rotate(2deg);
  -webkit-transform: skew(-2deg) rotate(2deg);
  -moz-transform: skew(-2deg) rotate(2deg);
  overflow: hidden;
}

div.skewed > * {
  width: 110%;
  position: absolute;
  top: 50%;
  transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
  -moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}

OUTPUT

This is similar to Andy Hoffman's method, but supports a greater number of browsers.

Comments

[Mirror318]

This looks great. The only catch is clip-path is only supported for 69.91% of users (caniuse.com/#feat=css-clip-path)

[Andy Hoffman]

What you've got was my first attempt. I chose a different way because I felt the skew/unskew method feels kind of dirty. But I guess you could say the same for the Polyfill. Eventually, CSS forces us to do bad things.

[Andy Hoffman]

@Mirror318 In mid 2020, support is at 94.3%.

[Andy Hoffman]

Late 2021, support is at 97.47%.