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

Question

有时图像只能解释1000字以内的事情

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

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

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

第一个选项

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

$('#StartDate').change(function() {
     var endDate = $('#EndDate');
     if ($('#LeaveType').val()==2) {
         endDate.val($(this).val());
     }
 });

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;