CSS只倾斜容器,而不是内容

时间:2013-01-30 22:59:35

标签: css transform skew

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

enter image description here

我尝试了以下代码,倾斜容器,然后向相反方向倾斜图像,但它只是给我一个方形图像。 Chrome检查员向我显示容器正在倾斜,但是向后倾斜图像会使其再次变为正方形。添加溢出:隐藏到容器类的工作,但角度的边缘变得锯齿状。这是我尝试过的:

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

请帮忙! :)

2 个答案:

答案 0 :(得分:13)

需要调整容器的位置和大小以便裁剪,然后应用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< - 之后(抗锯齿)

答案 1 :(得分:1)

代替CSS解决方案,您还可以通过使用画布和一些JS来实现效果;并将一系列裁剪的图像合成到画布上。画布方法的好处是你可能会在作物上获得更平滑的边缘,并且它可能会得到更好的支持。

HTML中的canvas元素;

<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仍然......)。

修改
做了一个快速测试 - 看起来你需要设置画布尺寸 - 并且显然等待所有图像正确加载,然后才能在画布上合成它们。