使用CSS3对角切割图像

Question

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

需要切除的部分采用三角形的形式

更具体一点：如果上面的图片是图片，蓝色部分应该剪掉，而不是黄色

html应为：

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

或：

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

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

最低浏览器支持：IE11，最新的webkits等。

Answer 1

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

http://jsfiddle.net/r3p9ph5k/

对于某些额外的位，您可能需要查看例如this。另外，有关IE的更多信息，请参阅this。

Answer 2

您可以使用pseudo element，并结合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>

Answer 3

这个有点脏，但......这是个想法：

<强> HTML ：

＆＃13;

＆＃13;

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);
}

＆＃13;

<figure>
  <img src="http://placehold.it/502x260&text=Random+Image" />
</figure>

＆＃13;

＆＃13;

＆＃13;

注意：另一种方法可能是使用伪元素来掩盖图片，但这不会产生真正的＆＃34; cut＆＃34;你应该能够看透的地方。

Answer 4

- 您可以使用http://cssplant.com/clip-path-generator。

这只是一个“肮脏的解决方案”，最好的方法是将svg放在img上方。

也许在未来，“剪辑css属性”将支持另一种形状，而不仅仅是“rect”，这样的事情可以做到！

另一个“肮脏的方式”是将一个div放在img上方，使用你想要的背景颜色并旋转它！

Answer 5

只是一个想法：

<强> 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);
}

<强>演示

Try before buy