html – 使用CSS3对角切割图像

如何使用CSS3对角切割部分图像或容器？

需要切除的部分具有三角形的形状

更具体地说：如果上面的图片是图像,则应该剪切蓝色部分,而不是黄色

HTML应该是：

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>

要么：

<div class="container">
  content
</div>

我自己的调查有很多方法可以做到这一点,但大多数都是hacky,所以寻找最好的方法

最低浏览器支持：IE11,最新webkits等

解决方法

像这样使用CSS3 -clip-path和polygon.您可以指定您想要的任何路径.

http://jsfiddle.net/r3p9ph5k/

对于一些额外的位,您可能需要查看例如this.此外,有关IE的更多信息,请参阅this.