Search code examples
htmlcssimagecrop

How to crop an image edge

I want to crop an image edge to set that edge transparant. I have used png to set to that edge when the background color white. But when it use for other backgrounds that white edge is there. So I want to know how to crop that image edge. Here's the CSS for the styling

 .cover-left-2 .avatar:after {
   width: 38px;
   height: 22px;
   background-position: -47px bottom;
 }

.avatar:after {
   content: " ";
   display: block;
   position: absolute;
   left: 0;
   bottom: 0;
   opacity: 0.9;
   filter: alpha(opacity=80);
   pointer-events: none;
   background: url(../img/photo-corner-sw.png) no-repeat left bottom;
   background-image: url(../img/photo-corner-sw.svg);
}

The image.

enter image description here

Solution

  • I found a jquery plugin call polycrop. You just need to add jquery to the page and add polyclip property to the element (the image you want to crop).

     <img src="http://lorempixel.com/200/150/people/1/Nishan/" 
        data-polyclip="0,0,199,0,199,151,50,150,0,97">

    That's it!

    The image looks like this after cropped

    enter image description here

    jsfiddle example : http://jsfiddle.net/rb73hc53/