CSS Skew 仅容器，而非内容

Question

我无法弄清楚如何使以下布局正常工作。我并不局限于纯 CSS——我知道 JS 将参与使其跨浏览器——但 CSS 解决方案会很棒。这是我想要实现的目标:

我试过下面的代码，先倾斜容器，然后朝相反的方向倾斜图像，但它只给了我一个方形图像。 Chrome 检查器向我显示容器已正确倾斜，但将图像向后倾斜会使它再次变成正方形。添加一个 overflow:hidden 到容器类的作品，但 Angular 边缘变得参差不齐。这是我尝试过的:

http://codepen.io/anon/pen/ubrFz

求助! :)

Answer 1

需要调整容器的位置和大小以便裁剪它，并应用 backface-visibility 规则:

.skew {
    -webkit-backface-visibility : hidden; /* the magic ingredient */
    -webkit-transform           : skew(16deg, 0);
    overflow                    : hidden;
    width                       : 300px;
    height                      : 260px;
    position                    : relative;
    left                        : 50px;
    border                      : 1px solid #666
}

.skew img {
    -webkit-transform : skew(-16deg, 0);
    position          : relative;
    left              : -40px;
}

http://codepen.io/anon/pen/HLtlG <- 之前(别名)

http://codepen.io/anon/pen/wnlpt <- 之后(消除锯齿)