Cut corner on div with image set to 100% height and width

问题

This is basically what i want to achieve --> 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>

Although i have a solution but there are various issues with the code in the fiddle as follows :

It doesn't work in IE or Edge as clip path isn't supported
Clip path doesn't support css shapes in firefox and if you need to make it work in firefox then you need to supply inline svg
Tried supplying inline svg as well but it has it's own set of issues that doesn't solve my requirement. I need the cut dimensions to remain the same irrespective of the height and width of the container. With inline svg that cuts the image right now, it's dimension changes with change in height and width i.e. the cut is responsive. I need static dimensions of the cut.

Other than above solution i searched a whole lot of solutions that might help me create div's with corners cut and the cut is transparent itself because i don't have a solid background at the back.

回答1:

You can use the approach I described in this question : Cut Corners using CSS using a rotate container with overflow:hidden;

For your example (as you want to display an image inside the element) you need to "unrotate" the content like this :

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

This solution also requires positioning either with margins or with absolute positioning.

回答2:

CSS Solution:

A Solution that WORKS but is very HACKY

The solution you use is best at this time (September 2015). It is not a hack, but just a simple 2D rotations and it will work in IE also.

Best article for CSS masking in browsers other than IE you can find on this page. It uses SVG with html foreignObject element, which is not fully supported.

I am trying to find something more elegant and clean to implement such a kind of solution in CSS

An elegant and clean CSS solution will be available in years to come, when css-mask and clip-path come alive.

Javascript Solution:

We can use HTML Canvas element to store the image data, than using Javascript to make part of the image transparent.

In following example we shall make bottom-right triangle transparent. There is a catch: the image must be on same domain, which is not case here on StackOverflow (it also cannot be base64 encoded).

I made it work on Liveweave playground, just open and wait for image to load and script to execute (the image is huge).

The source code is also below.

// 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"/>

The image we (cannot) use:

PHP Solution:

Similar to above, you could use iMagick library to make part of the images transparent. You could use iMagick mask, or directly change pixels' alpha - you can find an example in this answer.

来源：https://stackoverflow.com/questions/32370083/cut-corner-on-div-with-image-set-to-100-height-and-width

标签

html

css

svg

css-shapes

clip-path