CSS仅倾斜容器，而不是内容
我很难弄清楚如何让下面的布局工作。我并不局限于纯CSS --我知道JS会让它成为跨浏览器的--但是一个CSS解决方案会很棒。以下是我试图实现的目标：
我尝试了下面的代码，倾斜容器，然后在相反的方向上倾斜图像，但它只给我一个正方形的图像。Chrome inspector向我展示了容器被正确地倾斜，但将图像向后倾斜使其再次成为正方形。添加一个溢出:隐藏到容器类型的工作，但角度的边缘变得参差不齐。以下是我尝试过的方法：
http://codepen.io/anon/pen/ubrFz
请帮帮忙！:)
回答 2
Stack Overflow用户
发布于 2013-01-31 07:04:59
需要调整容器的位置和大小，以便可以裁剪它，并应用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 <- after (抗锯齿)
Stack Overflow用户
发布于 2013-01-31 07:24:18
代替CSS解决方案，您还可以通过使用画布和一些JS，并将一系列裁剪的图像合成到该画布上来实现此效果。画布方法的好处是，您可能会在作物上获得更平滑的边缘，而且它可能会得到更好的支持。
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);
}代码就在我的脑海中--我还没有测试过。但基本上-假设你有一个最大宽度为1000px，高度为100px的画布。上面发生的事情是，您在画布上设置了一个从点(800,0)到(900,100)的斜线裁剪区域，然后将图像绘制到该裁剪区域中……然后为每个图像设置一个短200像素的新剪切路径(注意'200 * i‘位)。显然，数学需要针对任意数量的图像进行调整，等等。但这个想法是存在的。
可能比纯CSS更棘手--但就像我说的--可能会更好地支持跨浏览器(尽管IE……)。
编辑
我做了一个快速测试--看起来你需要设置画布的尺寸--显然还需要等待所有图像正确加载，然后才能在画布上合成它们。
https://stackoverflow.com/questions/14615492
复制相似问题
腾讯云开发者
