用CSS对角切割图像 [英] Cutting image diagonally with CSS

问题描述

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

需要切除的部分为三角形

The part that needs to be cut away has the form of a triangle

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

To be more specific: if the above picture is the image the blue part should be cut out, not the yellow

html应为:

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

或:

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

根据我自己的调查，有很多方法可以做到这一点，但是大多数方法都是很棘手的，因此寻找一种最佳方法.

There is from my own investigation a lot of ways to do this, but most of them is hacky, so looking for a best approach

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

Min browser support: IE11, latest webkits etc.

推荐答案

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

Use CSS3 -clip-path and polygon like this. You can specify whatever path you want to.

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/

对于一些额外的内容，您可能想看看例如此.另外，有关IE的更多信息，请参见此.

For some extra bits you might want to take a look at e.g. this. Also, for more information about IE, see this.

这篇关于用CSS对角切割图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！