從圖像

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!