Cut corner on div with image set to 100% height an

2019-03-29 09:14发布

站内问答 / HTML/CSS
2003 2 4

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.

Other solutions explored

Using CSS3 Gradients sample

Using CSS Borders

Using jQuery plugin (http://jquery.malsup.com/corner/)

A Solution that WORKS but is very HACKY

  • Sample --> http://jsfiddle.net/26v7pfLb/

  • I am using this solution right now for containers that have fixed height and width but i have a page in my app where the containers have a static width but dynamic height. In that case the hack would be pretty difficult to implement and it seems very weird to use this solution personally.

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

Any pointers would be helpful.

2条回答
疯言疯语
2楼-- · 2019-03-29 09:50

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.

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2019-03-29 09:52

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:

enter image description here

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)