小编Vin*_*nay的帖子

在div上切角,图像设置为100%高度和宽度

这基本上就是我想要实现的目标 - > https://jsfiddle.net/tak1pyt7/1/

.clip {
  width: 500px;
  height: 500px;
  -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  height: 100%;
  width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="clip">
    <img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

虽然我有一个解决方案,但是小提琴中的代码存在各种问题,如下所示:

它不适用于IE或Edge,因为不支持剪辑路径
剪辑路径不支持Firefox中的CSS形状,如果你需要使它在Firefox中工作,那么你需要提供内联svg
尝试提供内联svg,但它有自己的一系列问题,不能解决我的要求.无论容器的高度和宽度如何,我都需要切割尺寸保持不变.使用内嵌svg立即切割图像,它的尺寸随高度和宽度的变化而变化,即切割是响应的.我需要切割的静态尺寸.

除了上面的解决方案,我搜索了很多解决方案,这些解决方案可能有助于我创建带有切角的div,切割本身是透明的,因为我背面没有坚实的背景.

探索了其他解决方案

使用CSS3 Gradients示例