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

【问题标题】：Is it possible to cut specific parts of an image?是否可以剪切图像的特定部分？
【发布时间】：2015-12-04 16:57:39
【问题描述】：

有时图片比 1000 字更能说明问题

假设黑色边框是我想要切断左上/右上边缘的图像 - 就像用红线标记的那样。

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

以防万一它不清楚我的意思是什么：我想要

我的意思是，图像看起来像这样

【问题讨论】：

CSS cut-off corners on image (<img> tag) without div的可能重复
@HunterTurner：我不太确定这是否真的是重复的。您链接到的问题是使用“切断”来实际表示“在上面放置一个白色三角形”，而这个问题似乎是在寻求一种实际上切断的方法图像的一部分，以便背景显示出来。

标签： css css-shapes

【解决方案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);
}

&lt;img class="cut" src="http://lorempixel.com/200/300/"&gt;

这使用calc (widely supported)，因此您可以指定精确的像素值进行剪辑。

【讨论】：

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

第二个选项

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

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

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;

&lt;div&gt;&lt;/div&gt;

【讨论】：