Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

image cropped as a triangle on webpage

image cropped as a triangle on webpage


This is a real css-challenge, I don't think this is possible:

I've made some white css triangles. and when you hover on a triangle, the white triangle should change in a photo also cropped like a triangle. I've made a jsfiddle for it:


Any help appreciated

Problem courtesy of: woutvdd


You can use svg to achieve this effect:


body {
    background-color: #e0e0e0;
#image-wrapper {
    position: relative;
.svg-background, .svg-image {
    clip-path: url(#clip-triangle);
.svg-image {
    visibility: hidden;
.clip-svg .svg-image:hover {
    visibility: inherit;

/* size and positioning */
 svg.clip-svg {
    position: absolute;
    height: 250px;
    width: 250px;
#svg-1 {
    top: 110px;
    left: 50px;
#svg-2 {
    top: 40px;
    left: 140px;
#svg-3 {
    top: 160px;
    left: 250px;

The Clipping Path is defined in svg#svg-defs, and can be set to whatever you like.

Image attributes are visible to / accessible by js and css. You can apply the clipping path to any html element with css of

myElement {
    clip-path: url(#clip-triangle);

but this is only reliable on firefox so far as I can tell.

Note: solution only tested on FF and chrome

note: small edit to move :hover from the svg to the embedded image, to correct problem with hover triggered outside clip area

Solution courtesy of: Dom Day


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

image cropped as a triangle on webpage


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription