Question

这基本上是我想要实现的目标 - ＆gt;的 https://jsfiddle.net/tak1pyt7/1/

.clip {
  width: 500px;
  height: 500px;
  -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  height: 100%;
  width: 100%;
}

<body>
  <div class="clip">
    <img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
  </div>
</body>

虽然我有一个解决方案但是小提琴中的代码有各种各样的问题如下：

在IE或Edge中不起作用，因为不支持剪辑路径
剪辑路径不支持firefox中的css形状，如果你需要让它在firefox中运行，那么你需要提供内联svg
尝试提供内联svg，但它有一系列问题无法满足我的要求。无论容器的高度和宽度如何，我都需要切割尺寸保持不变。对于现在切割图像的内联svg，它的尺寸随着高度和宽度的变化而变化，即切割是响应的。我需要切割的静态尺寸。

除了上述解决方案之外，我搜索了大量的解决方案，这些解决方案可能有助于我创建带有切角的div，切割本身是透明的，因为我背面没有坚实的背景。

探索了其他解决方案

使用CSS3 Gradients示例

样本 - ＆gt;的 http://jsfiddle.net/spdawson/3Tc8S/light/
如果您的内容占据了帖子开头提供的小提琴的全部高度和宽度，则不起作用。

使用CSS边框

样本 - ＆gt;的 http://jsfiddle.net/spdawson/HhZQe/light/
对我不起作用，因为必须在其上进行切割的容器必须包含纯色背景颜色，而我的设计并非如此。

使用jQuery插件（http://jquery.malsup.com/corner/）

示例代码 - ＆gt; http://jsfiddle.net/spdawson/nxnCD/light/
考虑到我的要求，你需要有坚实的背景颜色。我有一个图像作为背景。

解决方案工作但非常HACKY

样本 - ＆gt; http://jsfiddle.net/26v7pfLb/
我现在正在使用此解决方案用于具有固定高度和宽度的容器，但我的应用中有一个页面，其中容器具有静态宽度但动态高度。在这种情况下，黑客将很难实现，并且个人使用此解决方案似乎非常奇怪。
我正在努力寻找更优雅，更干净的东西，以便在CSS中实现这样一种解决方案

任何指针都会有所帮助。

Answer 1

您可以使用我在此问题中描述的方法：Cut Corners using CSS使用带overflow:hidden;

的旋转容器

对于您的示例（因为您想在元素中显示图像），您需要＆＃34;取消旋转＆＃34;像这样的内容：

＆＃13;

.clip {
  margin: -150px 0 0 -150px;
  display: inline-block;
  transform: rotate(-45deg);
  overflow: hidden;
}
img {
  margin: 150px 150px 0 150px;
  display: block;
  transform: rotate(45deg);
}
body{background:url(http://lorempixel.com/output/nature-q-g-640-480-7.jpg);background-size:cover;}

＆＃13;

<div class="clip">
    <img src="http://lorempixel.com/600/600/" />
</div>

＆＃13;

此解决方案还需要使用边距或绝对定位进行定位。

Answer 2

CSS解决方案：

解决方案工作但非常HACKY

您目前使用的解决方案最佳（2015年9月）。它不是一个黑客，只是一个简单的2D旋转，它也可以在IE中工作。

在IE以外的浏览器中进行CSS屏蔽的最佳文章，您可以找到on this page。它使用带有html foreignObject元素的SVG，即not fully supported。

我正在努力寻找更优雅，更干净的东西来实现这一点 CSS中的一种解决方案

当css-mask和clip-path活跃起来时，elegant and clean CSS解决方案将在未来几年内推出。

Javascript解决方案：

我们可以使用HTML Canvas元素来存储图像数据，而不是使用Javascript来使图像的一部分透明。

在下面的例子中，我们将使右下三角形透明。有一个问题：图像必须在同一个域，这在StackOverflow上不是这种情况（它也不能被base64编码）。

我让它在Liveweave playground上运行，只需打开并等待图像加载和脚本执行（图像很大）。

源代码也在下面。

// get the image, the image MUST BE LOCAL
var img = document.getElementById("your-image");
var height = img.offsetHeight;
var width = img.offsetWidth;
// create and customize the canvas
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;

// get the context
var ctx = canvas.getContext("2d");
// draw the image into the canvas
ctx.drawImage(img, 0, 0);

// get the image data object
var image = ctx.getImageData(0, 0, width, height);

// get the image data values 
var imageData = image.data,
	length = imageData.length;

// every fourth value is Alpha channel
// lets make bottom right triangle transparent
for(var i=3; i<length; i+=4){  
	// for calculations we need to know current pixel position on image
	// we define pixel left, top, right and bottom relative to the image rectangle
	// first index is 1, first pixel for width=4: left=1, right=4
	var pixel = (i+1)/4;
	var left = (pixel-1)%width+1;
	var top = Math.floor(pixel/width);
	var right = width-left+1;
	var bottom = height-top+1;
	// it is easy now to find pixel in bottom right rectangle:
	if( (right+bottom)<=30 ) {
		// make this pixel transparent
		imageData[i] = 0;
	};
}

// after the manipulation, reset the data
image.data = imageData;

// and put the imagedata back to the canvas
ctx.putImageData(image, 0, 0);

img.src = canvas.toDataURL();

<p>The image must be on same domain :(</p>    
<img id="your-image" src="http://i.stack.imgur.com/PKxQk.png"/>

我们（不能）使用的图像：

PHP解决方案：

与上面类似，您可以使用iMagick库使图像的一部分透明。您可以使用iMagick mask或直接更改像素的字母 - 您可以找到示例in this answer。

在div上切角，图像设置为100％高度和宽度

2 个答案: