6

这基本上是我想要实现的-> 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 渐变示例

使用 CSS 边框

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

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

  • 示例 --> http://jsfiddle.net/26v7pfLb/

  • 我现在将此解决方案用于具有固定高度和宽度的容器，但我的应用程序中有一个页面，其中容器具有静态宽度但动态高度。在这种情况下，黑客将很难实施，并且个人使用此解决方案似乎很奇怪。

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

任何指针都会有所帮助。

4

2 回答 2

4

您可以使用我在这个问题中描述的方法：Cut Corners using CSS using a rotate container withoverflow: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>

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

于 2015-09-03T11:21:25.097 回答
2

CSS 解决方案：

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

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

您可以在此页面上找到在 IE 以外的浏览器中进行 CSS 屏蔽的最佳文章。它使用带有 html foreignObject元素的 SVG，这不是完全支持的。

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

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

Javascript解决方案：

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

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

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

源代码也在下面。

// 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 - 您可以在此答案中找到一个示例。

于 2015-09-03T12:50:20.583 回答