Last updated
Clip Path Shape Reference
polygon(x1 y1, x2 y2, ...)— custom multi-point shape, most versatilecircle(radius at cx cy)— circular clipellipse(rx ry at cx cy)— elliptical clipinset(top right bottom left round radius)— rectangular clip with optional roundingpath('SVG path data')— complex SVG path clip
The CSS Clip Path Generator on TechConverter.me provides a visual editor with draggable polygon points, preset shapes for common use cases, and real-time preview. Design your shape, copy the generated CSS, and paste it directly into your stylesheet.
Examples
Example 1: Basic Shape Presets
Common clip-path shapes used in modern web design:
/* 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%);
}
/* Star (5-pointed) */
.star {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
79% 91%, 50% 70%, 21% 91%, 32% 57%,
2% 35%, 39% 35%);
}
/* Arrow pointing right */
.arrow-right {
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%,
60% 100%, 60% 80%, 0% 80%);
}
Example 2: Diagonal Section Dividers
Diagonal clip paths create dynamic section transitions on landing pages:
/* Section with diagonal bottom edge (slants down-right) */
.section-diagonal-bottom {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
padding-bottom: 8rem; /* extra padding for the clipped area */
}
/* Section with diagonal top edge */
.section-diagonal-top {
clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
padding-top: 8rem;
}
/* V-shaped bottom */
.section-v-bottom {
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
}
/* Parallelogram section */
.section-parallelogram {
clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
Example 3: Image Masking
Clip paths applied to images create custom-shaped photo frames:
/* Hexagonal team member photo */
.team-photo {
width: 200px;
height: 200px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
object-fit: cover;
}
/* Diamond-shaped feature image */
.diamond-image {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Angled hero image */
.hero-image {
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
/* Circle clip (alternative to border-radius: 50%) */
.circle-image {
clip-path: circle(50% at 50% 50%);
}
/* Ellipse clip */
.ellipse-image {
clip-path: ellipse(55% 40% at 50% 50%);
}