Creating responsive image shapes for Divi with CSS Clip Paths

You can create some great effects for your images, to use in for example the person module with CSS Clipping paths, which would otherwise typically require you to create a mask on your image in an image editor such as Photoshop. Even better, the results are responsive!

Below we show some examples of Circle, Rhombus and Right Point clipping paths.

To achieve this effect, without figuring out the code yourself, just add the short snippet of css in the Person Module Settings’ Custom CSS tab ( “Member Image” box).

Circle Clip Path – Person Module

For the circle shape, add this to the Custom CSS tab in the box labeled “Member Image”:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);

Rhombus Clip Path – Person Module

For the rhombus shape, add this to the Custom CSS tab in the box labeled “Member Image”:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Right Point Clip Path – Person Module

For the right point shape, add this to the Custom CSS tab in the box labeled “Member Image”:

-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

 

Pin It on Pinterest

Share This

25% off pre-launch discount!

Don't miss out - this pre-launch offer is closing soon! Join our mailing list to receive  a generous 25% Early Bird Discount on the full Divi 3.0 Course when we launch shortly .No obligation, just a chance to save off the full course price!

You have Successfully Subscribed!