CSS倾斜只有容器，而不是内容 [英] CSS Skew only container, not content

问题描述

我无法弄清楚如何使以下布局工作。我不限于纯CSS - 我知道JS将涉及到使其跨浏览器 - 但一个CSS解决方案将是真棒。这里是我想实现的：

I'm having trouble figuring out how to make the following layout work. I'm not restricted to pure CSS - I know JS will be involved to make it cross-browser - but a CSS solution would be awesome. Here's what I am trying to achieve:

我试过下面的代码，倾斜容器，然后反向倾斜的图像，但它只是给我一个方形图像。 Chrome检查器显示容器正确倾斜，但将图像倾斜，使其再次变为方形。添加溢出：隐藏到容器种类的作品，但角的边缘变得锯齿。这是我试过的：

I've tried the following code, skewing the container and then skewing the image in the opposite direction, but it just gives me a square image. Chrome inspector shows me that the container is being skewed properly, but skewing the image back makes it square again. Adding an overflow:hidden to the container kind of works but the edges of the angle become jagged. Here's what I have tried:

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

请帮助！ ：）

推荐答案

需要调整容器的位置和大小才能裁剪，并应用 backface-visibility 规则：

Need to tweak the positioning and the size of the container so you can crop it, and apply the backface-visibility rule:

.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 < - before（aliased）

http://codepen.io/anon/pen/HLtlG <- before (aliased)

http://codepen.io/anon/pen/wnlpt < - after（anti-aliased）

http://codepen.io/anon/pen/wnlpt <- after (anti-aliased)

这篇关于CSS倾斜只有容器，而不是内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！