Back to Article

How to create a background image clip path using css

Rhombus

/* Rhombus*/ .rhombus{clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

Parallelogram

/* Parallelogram*/ .parallelogram{clip-path:polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}

Triangle

/* Triangle*/ .triangle{clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

Trapezoid

/* Trapezoid*/ .trapezoid{clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);}