html - 从图像制作梯形

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然后给父母一些价值。

这是一个演示！