（CSS）偏斜img帧而不扭曲图像 [英] (CSS) skew img frame without distorting image

问题描述

我在制作一个包含许多歪斜元素的网站，例如：

这不是太糟糕，有CSS转换可能会扭曲。但是如何：

图片isn没有扭曲，只是帧被歪斜的方式。

解决方案

我认为

演示： http://codepen.io/antibland/pen/eZKxNa

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?

解决方案

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

这篇关于（CSS）偏斜img帧而不扭曲图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！