使用CSS对图像进行对角线切割

Question

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

需要切掉的部分呈三角形状。

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

HTML应为：

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

或者：

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

经过我自己的调查，有很多种方法可以做到这一点，但大部分方法都是hacky的，因此寻找最佳方法。

最少支持浏览器：IE11、最新的Webkit等。

- Doff3n

Answer 1

使用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/

如果您想要一些额外的帮助，可以查看例如此处。此外，了解更多有关IE的信息，请参见此处。

- Roope

---

如果不需要IE支持，这是最佳解决方案。 - insertusernamehere

谢谢，根据您的回答，我认为像这样的解决方案是我特定问题的最佳选择： http://jsfiddle.net/r3p9ph5k/1/ - Doff3n

说实话，目前还没有太多的浏览器支持clip-path属性，即使Chrome和Firefox也只有有限的支持。可以查看此链接以获取更多信息：http://caniuse.com/#feat=css-clip-path - jbutler483

没有IE和Edge支持，现在使用它还为时过早。 - LuBre

Answer 2

你可以使用pseudo元素，结合overflow:hidden;实现效果。

结果

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: url(http://placekitten.com/g/300/300);
}
div:after {
  content: "";
  position: absolute;
  top: 93%;
  left: 0;
  height: 100%;
  width: 150%;
  background: red;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

<div></div>

- jbutler483

---

这应该是最佳答案，因为它比@Roope的回答更容易直观地进行更改。 - Leon

Answer 3

这段有点混乱，但是大致意思是：

HTML:

body {
  background: #eee;
}
figure {
  display: inline-block;
  overflow: hidden;
  padding-left: 20px;
  margin-left: -20px;
  padding-top: 50px;
  margin-top: -50px;
  padding-right: 20px;
  margin-right: -20px;
  height: 200px;
  transform: rotate(-10deg);
}
figure img {
  transform: rotate(10deg);
}

<figure>
  <img src="http://placekitten.com/g/560/300" />
</figure>

注意：另一种方法是使用伪元素来遮盖图片，但这不会产生真正的“切割”效果，您将无法看到图片背后的内容。

- bob6664569

Answer 4

只是一个想法：

HTML

<figure>
    <img src="http://placehold.it/500x500" alt="">
</figure>

CSS (层叠样式表)

figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    line-height: 0;
}

figure:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    bottom: -91%;
    background: red;
    -webkit-transform: rotate(355deg);
    transform: rotate(355deg);
}

演示

先试后购买

- insertusernamehere

Answer 5

-您可以使用http://cssplant.com/clip-path-generator来实现此功能。

这只是一种“不太优雅的解决方案”，最好的方法是将svg放在图像上方。

也许在未来，“剪辑CSS属性”将支持除“rect”之外的其他形状，这样就可以完成类似的操作！

另一种“不太优雅的方式”是在图像上方放置一个具有所需背景颜色并旋转的div！

- Anfuca