将图像设置为 100% 高度和宽度的 div 上的切角答案

【问题标题】：Cut corner on div with image set to 100% height and width将图像设置为 100% 高度和宽度的 div 上的切角
【发布时间】：2015-11-28 23:03:51
【问题描述】：

这基本上是我想要实现的 --> 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 中不起作用，因为不支持剪辑路径
Clip path 在 Firefox 中不支持 css 形状，如果您需要使其在 Firefox 中工作，则需要提供内联 svg
也尝试过提供内联 svg，但它有自己的一组问题，无法解决我的要求。无论容器的高度和宽度如何，我都需要切割尺寸保持不变。使用现在切割图像的内联 svg，它的尺寸会随着高度和宽度的变化而变化，即切割是响应式的。我需要剪裁的静态尺寸。

除了上述解决方案之外，我搜索了很多解决方案，这些解决方案可能会帮助我创建切角的 div，并且切角本身是透明的，因为我的背面没有纯色背景。

探索的其他解决方案

使用 CSS3 渐变示例

示例 --> http://jsfiddle.net/spdawson/3Tc8S/light/
当您的内容占据整个区域的高度和宽度时不起作用，例如我在帖子开头提供的小提琴。

使用 CSS 边框

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

使用 jQuery 插件 (http://jquery.malsup.com/corner/)

示例代码 --> http://jsfiddle.net/spdawson/nxnCD/light/
您需要有纯色背景色，考虑到我的要求，情况并非如此。我有一张图片作为背景。

一个可行但非常 HACKY 的解决方案

示例 --> http://jsfiddle.net/26v7pfLb/
我现在正在将此解决方案用于具有固定高度和宽度的容器，但我的应用程序中有一个页面，其中容器具有静态宽度但动态高度。在这种情况下，黑客将很难实施，并且个人使用此解决方案似乎很奇怪。
我正在尝试寻找更优雅、更简洁的方式来在 CSS 中实现这种解决方案

任何指针都会有所帮助。

【问题讨论】：

@web-tiki 提供的解决方案非常好。您也可以尝试我在此处的回答中提供的方法 - stackoverflow.com/questions/19248443/…。 CSS 版本可以支持非纯色背景，也可以响应。
@Harry 你的解决方案在我有扎实背景的情况下是有效的。这里我在背景中有一张图片，因此这个解决方案不起作用。
在两个 sn-ps 中，您会注意到 body 元素有一个径向渐变图像作为背景。它们不是纯色背景 :) 在 SVG sn-p 和 CSS 版本中的第三个示例中，即使形状的内容也不是纯色。
对不起，那是我的错。我又检查了一遍。该解决方案仍然对我无效，因为我的容器可能包含文本+图像+视频内容的任意组合。我看到您使用了两个图像来产生剪切效果。我不能保证我的内容只是纯图像。有关如何解决此问题的任何帮助？
在这种情况下，我认为你不走运，因为我能想到的最好的是 SVG 剪辑路径，而 IE 支持总是一个缺点。

标签： html css svg css-shapes clip-path

【解决方案1】：

您可以使用我在这个问题中描述的方法：Cut Corners using CSS using a rotate container with overflow:hidden;

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

.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;}

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

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

【讨论】：

那是OP已经使用的解决方案，查看his Fiddle。
我已经在使用这个解决方案了。我不喜欢使用它的原因是我正在处理的实际屏幕是用于用户 cmets。评论块可以包含文本/视频/图像或三件事的任意组合。此外，注释块的高度和整体 cmets 的数量可能会有所不同，因此在这种情况下，该解决方案的优化程度如何？
另外，由于我的容器动态尺寸，当在 dom 中创建 html 时，动态计算裁剪 div 的位置变得非常困难。

【解决方案2】：

CSS 解决方案：

一个可行但非常 HACKY 的解决方案

此时（2015 年 9 月）您使用的解决方案是最好的。这不是 hack，只是一个简单的 2D 旋转，它也可以在 IE 中工作。

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

我正在尝试找到更优雅和更干净的东西来实现这样的 CSS中的一种解决方案

elegant and clean CSS 解决方案将在未来几年推出，届时 css-mask 和 clip-path 会出现。

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，或者直接改变像素的alpha——你可以找到一个例子in this answer。

【讨论】：