css - 倾斜图像的一个角

Question

我正在尝试倾斜 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);
}

Answer 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;
}

小提琴

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

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

摆弄多个选项