Day #3 Clipping Images with Shapes

Sandbox This is where you play

Instructions: Use CSS3 to "clip" the following images with different shapes!

Visit: https://bennettfeely.com/clippy/ For custom Clip path

Example #1 CROSS

Example #2 RABBET

Example #3 TRIANGLE

Example #4 STAR

Final Result Use this for reference!

Example #5 CIRCLE

Example #6 CHAT

Example #7 CLOSE

Example #8 ARROW

Information About this lesson

What are we making?

Fun & fancy images by masking them with custom shapes!

Where can I use it?

In your websites and client projects as interesting ways to display images.

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.