代码之家 › 专栏 › 技术社区 › Doff3n

使用CSS对角剪切图像

css-shapes css html

Doff3n · 技术社区 · 10 年前

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

需要切除的部分呈三角形

Example of image

更具体地说:如果上面的图片是图像,蓝色部分应该被剪掉,而不是黄色部分

html应该是:

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

或:

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

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

最小浏览器支持:IE11,最新的webkit等。

5 回复 | 直到 6 年前

Temani Afif 6 年前

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

jbutler483 shennan 10 年前

你可以使用 pseudo element 与…结合 overflow:hidden;

后果

enter image description here

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>

bob6664569 4 年前

这个有点脏,但。。。这是一个想法:

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>

注意:另一种方法可能是使用伪元素来掩盖图片,但这不会产生真正的“切口”,您应该能够看穿。

insertusernamehere 10 年前

只是一个想法:

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