The Old County The Old County - 3 months ago 20
CSS Question

CSS3 to corner crop an image

Is there a css3 method that would allow you to diagonally corner crop an image?

enter image description here

I have a white/grey box variant in the works -- for solid colors -



.item:before{
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 40px solid #dddddd;
border-left: 40px solid #ffffff;
width: 0;
}


.item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-top: 40px solid #ffffff;
border-left: 40px solid #dddddd;
width: 0;
}





one of the big issues now though

is the polygon is using %'s -- so if the divs are different sizes -- the corners look different

enter image description here

Answer

This isn't quite the right dimensions, and you'll have to adjust based on your image height/width, but here's a little example that could work:

.clipit {
  max-width:100%;
  height:auto;
  -webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
  clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));
}
<img class="clipit" src="http://images.freeimages.com/images/previews/865/stairs-of-light-1532779.jpg" />

This page could be really useful to you: http://bennettfeely.com/clippy/

Basically: clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0% calc(100% - 30px));:

  • Point 1 at 0% (width), 0% (height)
  • Point 2 at 100% - 30px (width), 0% (height)
  • Point 3 at 100% (width), 0% + 30px (height)
  • etc.