透视裁剪与CSS3

Question

我想用CSS3创建一个类似于效果的透视裁剪，如下所示：

我确实尝试过自己做但不能，任何帮助都会受到赞赏。

这是我的尝试：http://jsfiddle.net/krish7878/y9eusob9/

HTML代码：

    <div class="container">
       <img src="http://img.netcarshow.com/Lotus-Evora_GX_Racecar_2013_1600x1200_wallpaper_01.jpg" alt="main image" />
   </div><!-- /.container -->

CSS代码：

.container{
    overflow: hidden;
    width: 300px;
    height: 200px;
    margin-top: 30px;
    margin-left: 30px;
    border-top-right-radius: 20px;
}

Answer 1

一个选项可能是添加容器<div>，例如.perspective，它获取黄色背景颜色并在图像上使用多边形clip-path。

创建这些多边形的好工具是Bennett Feely's clippy。 Browser support for clip-path虽然尚未完全存在。有关更多背景信息和选项，请参阅Clipping and Masking in CSS。

.perspective {
  display: inline-block;
  background-color: #ff0;
}
  
.perspective__image {
  display: block;
  -webkit-clip-path: polygon(10% 20%, 90% 10%, 90% 90%, 10% 80%);
  clip-path: polygon(10% 20%, 90% 10%, 90% 90%, 10% 80%);
}

<div class="perspective">
  <img src="http://www.nicenicejpg.com/400/300" class="perspective__image"/>
</div>

Answer 2

您可以使用像这里找到的分层技术来完成此效果：

http://cssglobe.com/angled-content-mask-with-css/

基本上，作者使用了几个在容器元素上以overflow: hidden来回旋转的嵌套元素。

Answer 3

对于maximum browser support，您可以使用svg的{​​{1}}。

clipPath

Answer 4

我发现了一个关于css-tricks的精彩教程，讨论了这样做：

http://css-tricks.com/almanac/properties/p/perspective/

您将利用transform属性进行模拟透视变化所需的旋转。

希望这有帮助！