clipath for All browsers

clipath for All browsers

by george_black

HTML

<div id="image-wrapper">
    <svg id="svg-1" class="clip-svg">
        <rect class='svg-background' width="300" height="300" fill="#ffffff" />
        <image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" />
    </svg>
</div>
<svg id="svg-defs">
    <defs>
        <clipPath id="clip-triangle">
            <polygon points="0 0, 100 0, 112 13, 240 13, 240 250, -250 250"/>
        </clipPath>
    </defs>
</svg>

CSS

body { background-color: #e0e0e0; }
#image-wrapper { position: relative; }
.svg-background, .svg-image { clip-path: url(#clip-triangle); }
.svg-image {
    -webkit-transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    opacity: 1;
    transition: all 0.5s ease 0.2s;
}

svg.clip-svg { height: 250px; position: absolute; width: 250px; }
#svg-1 { left: 0px; top: 0px; }