CSS Clip Path Demos

Clip path is a CSS3 feature that becomes more and more popular. You can use it to cut parts out of an element. To give you a clue what you can do with this CSS property I created three small demos. If you don’t know how to use clip-path I recommend to read this article first: https://css-tricks.com/almanac/properties/c/clip/

The demos doesn’t work in Firefox and IE :(

Diamond Hover

The diamonds are formed with clip-path. On hover the points will change to a square. Have a look at the CSS to see how it is implemented.

See the Pen Clip-path animation by Ingo Joseph (@ingojoseph) on CodePen.

Image Split

Actually I used two images to achieve this effect – One for the left side and one for the right side.

See the Pen doRxvg by Ingo Joseph (@ingojoseph) on CodePen.

Fish

This fish consists of two elements. The fish itself and the eye. A keyframe animation animates the clip-path of the eye and the mouth.

See the Pen VLpNvJ by Ingo Joseph (@ingojoseph) on CodePen.

Clip-path works in Chrome, Safari and Opera (Can I Use).

Did you already use clip-path in production?


All used images are from Pexels a website to find free stock photos.

Pexels

Are you looking for free stock photos? Then check out pexels.com.

Pexels – Free Stock Photos

Find free high-quality stock photos.

Start Browsing Free Photos →