使用 CSS3 进行透视裁剪答案

【问题标题】：Perspective Crop with CSS3使用 CSS3 进行透视裁剪
【发布时间】：2015-02-26 00:05:32
【问题描述】：

我想用 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;
}

【问题讨论】：

发布代码！展示您已经尝试过的内容！
jsfiddle.net/krish7878/y9eusob9

标签： html css crop

【解决方案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>

【讨论】：

非常感谢您的回答，它是否兼容crossbroser？ IE9+、chrome、safari、firefox？
不，很遗憾不是，如果您希望它是跨浏览器，您可以创建一个包含您的图像的 SVG 图像。
谢谢你的回答，不幸的是我需要一个滑块，你的方法似乎有效。
另一种选择是在图像顶部覆盖具有透明中心的 SVG。我认为这适用于 IE9+。

【解决方案2】：

您也许可以使用类似此处的分层技术来实现此效果：

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

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

【讨论】：

【解决方案3】：

对于maximum browser support，您可以使用svg 的clipPath。

<svg width="400" height="400">
  <defs>
    <clipPath id="shape">
      <path d="M50,50 L400,0 L400,400 L50,350" />
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#shape)" width="400" height="400">
    <img src="http://www.lorempixel.com/400/400" />
  </foreignObject>
</svg>

【讨论】：

【解决方案4】：

我找到了一篇关于 css-tricks 的很棒的教程，其中谈到了如何做到这一点：

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

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

希望这会有所帮助！

【讨论】：

这是评论，不是答案。