用 CSS 对角线切割图像

Question

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

需要切掉的部分是三角形

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

html应该是：

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

或：

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

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

最低浏览器支持：IE11、最新的 webkit 等

Answer 1

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

只是一个 "dirty solution"，最好的办法是在 img 上面放一个 svg。

也许在未来，"clip css property" 会支持另一种形状，而不仅仅是 "rect"，这样的事情就可以做到！

另一个 "dirty way" 正在将 div 放在 img 上方，使用您想要的背景颜色并旋转它！

Answer 2

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

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>

注意：另一种方法可能是使用伪元素来遮盖图片，但这不会产生真正的“剪切”，您应该能够看到。

Answer 3

只是一个想法：

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

Answer 4

像这样使用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. Also, for more information about IE, see this.

Answer 5

您可以使用 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>

用 CSS 对角线切割图像

Cutting image diagonally with CSS

html

css

css-shapes