從圖像制作梯形

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

這是一個演示！