CODEWITHSUNDEEP
htmlcss
The Old County
The Old County

Reputation: 89

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

Upvotes: 3

Views: 905

Answers (3)

Jonathan
Jonathan

Reputation: 6537

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.

Upvotes: 1

Niles Tanner
Niles Tanner

Reputation: 4021

I think I figured it out. you would have to use clip-path:

    .item{
      -webkit-clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
      clip-path: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0);
    }

here's an example with a image and div with a background: http://codepen.io/nilestanner/pen/vXOZmG

You cant create your own polygons here: http://bennettfeely.com/clippy/

Upvotes: 0

Matt McManis
Matt McManis

Reputation: 4675

Take a look at this site http://bennettfeely.com/clippy/

You can design your own clip path angles. (Designer does not appear to work in Firefox)

-webkit-clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);
clip-path: polygon(0 10%, 10% 0, 100% 0%, 100% 90%, 90% 100%, 0% 100%);

The 10% is the top left corner, the 90% is the bottom right.

example image

Upvotes: 0

Related Questions