How to create different shapes using the clip-path CSS property
Are you familiar with clipping? It’s a widely used technique that defines a certain region of an element that is visible. Everything around this visible region is clipped and doesn’t get rendered. In simple words: you hide some visual portions of an element and show a certain region that you want.
A little bit about clip-path property
The idea behind clip-path isn’t new, CSS2 already specified the
clip property. But it’s limited to rectangular clipping and is working only with absolutely positioned elements. The
clip property has some limitations in SVG as well. That’s why
clip-path property was added to SVG specifications.
clip-path can be applied to all HTML and SVG elements. The way it works is quite simple: it provides a series of X and Y values to create a path. These values clip the image and show only the defined area of your element. With this property you can create lot’s of different shapes: from simple triangles or circles to more complex geometric shapes. Your imaginations is the only limit. Here is a simple example:
To achieve this triangle effect you have to take one element and apply a clip path-to it.
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
Clip-path is a part of working draft and is not widely supported by all major browsers. Only webkit based browsers (Chrome, Safari, Opera, etc.) are fully supporting it. In any case, you can create awesome effects for these browsers (waiting for Firefox and IE). Here is the compatibility list.
Back to our main story
Drew Minns, a talented UI/UX designer, developer and teacher at drewminns.com got an interesting request from one of his students. He wanted to replicate an effect seen on Squarespace website. Drew decided to help his student and dived into this interesting journey, where he explained how to work with clip-path CSS property and create different cool shapes with it. Let’s see some examples.
You can use diverse shapes to create stylish effects. Here is one of them:
The bottom line
Although clip-path is not yet supported by all major browsers, you can use it to create really nice effects and animations. You can also combine diverse shapes and create more complex ones, your creativity is the only limit!
Note: You can also use
background-clip: text to clip your background according to different characters (letters, digits, even font icons). This is a handy property that you can use in some cases (for example when you create banners or hero units).