是否可以剪切图像的特定部分？

Question

有时图片比 1000 个单词更能说明问题

假设黑色边框是我的图像我想剪掉顶部 left/right 边缘 - 就像红线标记的那样。

是否可以（如果可以：如何）用 CSS 以这种方式剪切图像？

以防万一不清楚我所说的剪切是什么意思：我想要

我所说的剪切是指图像看起来像这样

Answer 1

如果不使用包装器元素，您可以使用 clip-path，尽管支持不是很好。

img.cut {
  -webkit-clip-path: polygon(50px 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 50px);
  clip-path: polygon(50px 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 50px);
}

<img class="cut" src="http://lorempixel.com/200/300/">

这使用 calc (widely supported)，因此您可以指定精确的像素值作为裁剪依据。

Answer 2

CSS伪

如果您知道您的背景将保持纯色，您可以通过多种方式使用伪元素来实现这一点。

第一个选项

一个非常简单的解决方案是使用带边框的伪元素，应该可以达到您想要的效果。

div {
  height: 300px;
  background: red;
  position: relative;
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid white;
  border-right: 80px solid red;
  width: 0;
}
div:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 80px solid white;
  border-left: 80px solid red;
  width: 0;
}

<div></div>

第二个选项

使用比父级大的单个伪元素并旋转它以获得所需的效果。

这是一个更清晰的效果，也意味着支持使用背景图像并且更容易实现。

div {
  height: 200px;
  width: 200px;
  background: transparent;
  position: relative;
  z-index: 9;
  overflow: hidden;
}
div:before {
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  transform: rotate(45deg);
  background: red;
  left: -50%;
  top: 20px;

<div></div>

是否可以剪切图像的特定部分？

Is it possible to cut specific parts of an image?

css

css-shapes

CSS伪