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
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.
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.
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.