从图像制作梯形

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演示

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价值。

这是一个演示！