html - 用CSS对 Angular 切割图像

如何使用CSS对角切掉一部分图像或容器？

需要切除的部分为三角形

更具体地说:如果上面的图片是图片，则应切除蓝色部分，而不是黄色

html应该是:

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

要么:

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

根据我自己的调查，有很多方法可以做到这一点，但是大多数方法都是骇人听闻的，因此寻求最佳方法

最低浏览器支持:IE11，最新的Webkit等。

最佳答案

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

img {
  width: 100px;
  height: 100px;
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
  clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
}

<img src="https://picsum.photos/id/0/100/100">

http://jsfiddle.net/r3p9ph5k/

对于一些额外的地方，您可能想看看例如this。另外，有关IE的更多信息，请参见this。

关于html - 用CSS对 Angular 切割图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29259935/