Image cropping using webclip

by Mayank Dixit

HTML

<div id="one">
    <div id="two"></div>
</div>

CSS

#one {
    position: relative;
    width: 300px;
    height: 200px;
    background: gray;
    -webkit-clip-path: polygon(10px 0px, 320px 0px, 320px 200px, 10px 200px, 10px 180px, 0px 175px, 10px 170px, 10px 0px);
}
#two {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: white;
    -webkit-clip-path: polygon(10px 0px, 320px 0px, 320px 200px, 10px 200px, 10px 178px, 0px 174px, 10px 170px, 10px 0px);
    background-image: url(http://dnfey6ivm608d.cloudfront.net/pp/505aed8d14c19615c87b40dba6b0411e_2a3c_2a3c-o.jpg);
    background-size: cover;
    background-position: 100% 21.6797%;
}