从图像

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!