倾斜图像的一个角答案

【问题标题】：Skew one corner of image倾斜图像的一个角
【发布时间】：2014-03-30 22:51:38
【问题描述】：

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

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

 background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);

小提琴：http://jsfiddle.net/3eX5j/

我的代码是：

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

【问题讨论】：

您想要纯 CSS3 解决方案吗？
我想尽可能地接近纯 CSS3
我的时间不多，但似乎有可能。 This 是你想要的，不是吗？这是基于this MDN page 的快速破解。我知道它需要工作，抱歉。

标签： css transform perspective skew

【解决方案1】：

您需要做的就是在 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;
}

fiddle

解释：您正在将元素在上部朝您旋转。但是，透视图（通过变换原点处理，它是一个函数！）使左手旋转不会在水平移动中平移。

看看如何控制最终尺寸是多少

fiddle with multiple options

【讨论】：

@Kroltan 谢谢！很高兴你喜欢它！
这个解决方案只有一个问题，因为它增加了图像的宽度，而不是减少它（在底部）。知道如何在保持宽度的同时做到这一点吗？
使用您应用转换的点。添加了示例。（与未转换的 div 进行比较）