effects

CSS clip-path Shapes

Create triangles, hexagons, stars, and custom polygon shapes using CSS clip-path.

clip-path crops an element to a geometric shape by hiding everything outside the path. The polygon() function accepts any number of x/y coordinate pairs, enabling unlimited shape possibilities. clip-path shapes can be animated with transition for morph effects and work on images, divs, and video elements.

Live CSS Editor

CSS

Preview

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

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

/* Pentagon */
.pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

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

/* Chevron / arrow */
.chevron {
  clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%, 20% 50%);
}

/* Angled section divider */
.section-angled {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Diagonal cut bottom */
.diagonal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

/* Animated shape morph on hover */
.morph {
  clip-path: circle(50%);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.morph:hover {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Inset (rounded rectangle clip) */
.inset-clip {
  clip-path: inset(10% 15% round 12px);
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

clip-path: polygon() coordinates are percentages of the element's bounding box. Use clippy.adhang.in to generate shapes visually. For image masking, apply clip-path directly to the <img> tag. clip-path is hardware-accelerated and safe to animate.