Css 倾斜图像的一角

我正在尝试倾斜div背景的一个角，如下图中的绿色复选标记所示：

然而，在CSS3中，我无法实现这一点，倾斜会完全倾斜每个角落。我只想将右下角向左倾斜（比如25px）并保持透视效果（如上图所示）

小提琴：

我的代码是：

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: skew(-45deg);
}

---

你需要做的就是在3d中思考：

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-origin: left center;
}

说明：您正在向您的上方旋转图元。但是，透视图（通过变换原点处理，这是一个函数！）使左手旋转不会在水平运动中平移

查看如何控制最终尺寸

---

您想要纯CSS3解决方案吗？我希望尽可能接近纯CSS3我没有太多时间，但这似乎是可能的。这就是你想要的，不是吗？这是一个基于透视图的快速破解。我知道它需要改进，对不起。@Kroltan谢谢！很高兴你喜欢它！这个解决方案只有一个问题，因为它增加了图像的宽度，而不是减少它（在底部）。你知道如何在保持宽度的同时做到这一点吗？从应用变换的地方开始。增加了一个例子。（与未转换的div进行比较）

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: perspective(100px) rotateX(-25deg);
    -webkit-transform-origin: left center;
    -moz-transform: perspective(100px) rotateX(-25deg);
    -moz-transform-origin: left center;
}