我无法弄清楚如何使以下布局起作用。我不仅限于纯 CSS——我知道 JS 将参与到跨浏览器中——但 CSS 解决方案会很棒。这是我想要实现的目标：
我尝试了以下代码，倾斜容器，然后向相反方向倾斜图像，但它只给了我一个方形图像。 Chrome 检查器向我显示容器已正确倾斜，但将图像向后倾斜使其再次呈方形。添加溢出：隐藏到容器类型的作品，但角度的边缘变得锯齿状。这是我尝试过的：
http://codepen.io/anon/pen/ubrFz
请帮忙！ :)
【问题讨论】：
需要调整容器的位置和大小以便您可以裁剪它，并应用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;
}
【讨论】：
代替CSS方案，你也可以使用canvas和一些JS来实现效果；并将一系列裁剪的图像合成到该画布上。 canvas 方法的好处是您可能会在作物上获得更平滑的边缘，并且可能会得到更好的支持。
HTML 中的画布元素；
<canvas id="mycanvas"></canvas>
还有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...）。
编辑
进行了快速测试 - 看起来您需要设置画布尺寸 - 并且显然还要等待所有图像正确加载，然后才能在画布上合成它们。
【讨论】：