从图像中制作梯形

Question

我想制作一张充满梯形的图片，如下所示：

我不需要旋转。我不需要倾斜图片。 transform: matrix不起作用！

解决方案几乎只需要连接两段代码：

background-image:url("http://3.bp.blogspot.com/-D9i-wqTIjFw/T5x_51p2rJI/AAAAAAAABLs/VytuZcJGNuY/s400/indahnya.jpg");

这个好的代码：

.myShape {
width: 0;
height: 50px;
border-left: 50px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;

}

Answer 1

使用CSS，您可以制作这样的形状。尝试这样的事情：

.myShape {
    width: 0;
    height: 50px;
    border-left: 50px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

jsFiddle Demo

Answer 2

我知道用图像执行此操作的唯一方法是使用带透视的3D变换。所以在你的元素上，你需要在y轴上给它一个旋转：

#rectangle {
    background-image: url("http://3.bp.blogspot.com/-D9i-wqTIjFw/T5x_51p2rJI/AAAAAAAABLs/VytuZcJGNuY/s400/indahnya.jpg");
    -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
}

然后给父母一些perspective值。

Here's a demo!