Open navigation menu

CSS Clip Path Shapes

Create geometric shapes and masks using CSS clip-path with polygon and circle for visual design effects.

CssConfig Management

Code

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

.clip-circle {
  clip-path: circle(50% at 50% 50%);
}

.clip-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Related Examples