将图像设置为 100% 高度和宽度的 div 上的切角
Posted
技术标签:
【中文标题】将图像设置为 100% 高度和宽度的 div 上的切角【英文标题】：Cut corner on div with image set to 100% height and width 【发布时间】：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/" />
</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 提供的解决方案非常好。您也可以尝试我在此处的回答中提供的方法 - ***.com/questions/19248443/…。 CSS 版本可以支持非纯色背景，也可以响应。 @Harry 你的解决方案在我有扎实背景的情况下是有效的。这里我在背景中有一张图片，因此这个解决方案不起作用。 在两个 sn-ps 中，您会注意到body 元素有一个径向渐变图像作为背景。它们不是纯色背景 :) 在 SVG sn-p 和 CSS 版本中的第三个示例中，即使形状的内容也不是纯色。
对不起，那是我的错。我又检查了一遍。该解决方案仍然对我无效，因为我的容器可能包含文本+图像+视频内容的任意组合。我看到您使用了两个图像来产生剪切效果。我不能保证我的内容只是纯图像。有关如何解决此问题的任何帮助？
在这种情况下，我认为你不走运，因为我能想到的最好的是 SVG 剪辑路径，而 IE 支持总是一个缺点。
【参考方案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);
bodybackground: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 使部分图像透明。
在下面的例子中，我们将使右下三角形透明。有一个问题：图像必须在同一个域中，这在 *** 上不是这种情况（它也不能是 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。
【讨论】：
以上是关于将图像设置为 100% 高度和宽度的 div 上的切角的主要内容，如果未能解决你的问题，请参考以下文章