CSS倾斜只针对容器，而不是内容。

Question

我在试图弄清如何使以下布局工作时遇到了问题。 我不限于使用纯CSS - 我知道需要使用JS来实现跨浏览器兼容，但是如果有CSS解决方案的话就太棒了。这就是我想要实现的效果：

我尝试了以下代码，将容器倾斜，然后将图像倾斜到相反的方向，但它只给我提供了一个正方形图像。 Chrome检查器显示容器正在被正确地倾斜，但是将图像倾斜回来会使其变成正方形。 将overflow:hidden添加到容器中有点奏效，但角的边缘变得锯齿状。 这是我尝试过的内容：

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

请帮忙！ :)

- briteweb

---

如果这些图片是你的，你为什么不可以请设计师将它们做成一个带有透明背景的PNG格式（当然需要进行裁剪和倾斜）呢？ - user1017882

不要依赖于设计师，只是别这样做。 - Ziga Petek

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 <- 之后（反走样）

- AlienWebguy

---

太棒了！在所有好的浏览器上都完美运行。现在要想办法解决IE（8+）的问题。 - briteweb

太棒了！但我没有使用背面，它仍然能够正常工作！非常感谢！ - aleXela

Answer 2

如果没有CSS解决方案，您也可以通过使用画布和一些JS来实现效果；并将一系列裁剪后的图像合成到画布上。画布方法的好处是可能会获得更平滑的裁剪边缘，并且它的支持可能会更好。

HTML中的画布元素；

<canvas id="mycanvas"></canvas>

And JS;

var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = '../my/image1.jpg';
img2.src = '../my/image2.jpg';
img3.src = '../my/image3.jpg';

var can = document.getElementById("mycanvas");
var ctx = can.getContext('2d');

var imgs = [img1, img2, img3]; //array of JS image objects that you've set up earlier

can.width = 1000;
can.height = 100;

for (var i=0; i < imgs.length; i++) {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(800 - (200 * i), 0);
    ctx.lineTo(900 - (200 * i), 100); 
    ctx.lineTo(0, 100);
    ctx.closePath();
    ctx.clip();

    ctx.drawImage(imgs[i], 0, 0);
}

这段代码只是我脑海中的想法，我还没有测试过。但基本上，假设您有一个最大宽度为1000像素，高度为100像素的画布。上面发生的事情是，您设置了一个裁剪区域，该区域在从点（800,0）到（900,100）的画布上设置了对角线，然后将图像绘制到该裁剪区域中... 然后为每个图像设置新的裁剪路径，每个图像缩短200像素（请注意“200 * i”部分）。显然，数学需要针对任意数量的图像进行调整等等... 但思路已经存在。

可能比纯CSS棘手一些，但正如我所说，可能在跨浏览器方面支持更好（尽管IE除外...）。

编辑 快速测试一下-看起来您需要设置画布尺寸-并且显然要等待所有图像正确加载才能将它们合成到画布上。

- niko

---

谢谢您提供的解决方案。我在IE中使用了canvas，所以这可能是我需要的IE解决方案！ - briteweb