Circle
Creates a perfect circle. The first parameter is the radius, the second specifies the center position.
clip-path: circle(50% at 50% 50%);
/* circle(radius at x-position y-position) */
Ellipse
Creates an oval shape. First two parameters define horizontal and vertical radius, last two define center position.
clip-path: ellipse(70% 50% at 50% 50%);
/* ellipse(rx ry at x-position y-position) */
Triangle
Uses polygon() to create a triangle. Each coordinate pair represents a vertex of the shape.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/* Three points: top center, bottom left, bottom right */
Diamond
A diamond shape created with four points positioned at the middle of each side.
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Four points: top, right, bottom, left */
Hexagon
A six-sided polygon. Points are calculated to create equal angles between sides.
clip-path: polygon(30% 0%, 70% 0%, 100% 50%,
70% 100%, 30% 100%, 0% 50%);
/* Six points creating equal sides */
Star
A complex 5-pointed star using 10 coordinates - 5 for outer points and 5 for inner points.
clip-path: polygon(50% 0%, 61% 35%, 98% 35%,
68% 57%, 79% 91%, 50% 70%,
21% 91%, 32% 57%, 2% 35%, 39% 35%);
Arrow Right
An arrow pointing to the right, created by cutting out the arrow shape from a rectangle.
clip-path: polygon(0% 0%, 75% 0%, 100% 50%,
75% 100%, 0% 100%, 25% 50%);
/* Creates arrow pointing right */
Speech Bubble
A speech bubble with a pointer at the bottom. Useful for chat interfaces and tooltips.
clip-path: polygon(0% 0%, 100% 0%, 100% 75%,
75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* Rectangle with bottom pointer */
Inset (Rectangle)
Uses inset() to create a rectangle by cutting from each side. Values are: top, right, bottom, left.
clip-path: inset(10px 20px 30px 10px);
/* inset(top right bottom left) */
Rounded Inset
Inset with rounded corners using the round keyword.
clip-path: inset(10px 10px 10px 10px round 20px);
/* inset(offsets) round border-radius */
Trapezoid
A trapezoid shape where the top is narrower than the bottom.
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
/* Narrower top, wider bottom */
Parallelogram
A slanted rectangle where opposite sides are parallel and equal.
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
/* Slanted rectangle */
Your Custom Shape
Your original clip-path creates a custom shape with angled corners and calc() for responsive sizing.
clip-path: polygon(16px 0, 100% 0, 100% 30px,
calc(100% - 18px) 48px,
calc(100% - 18px) 100%,
0 100%, 0 16px);
/* Custom shape with calc() values */
Key Clip-Path Concepts
Basic Shapes:
• circle(radius at x y) - Creates circular clips
• ellipse(rx ry at x y) - Creates oval clips
• inset(top right bottom left) - Creates rectangular clips
Polygon:
• polygon(x1 y1, x2 y2, x3 y3, ...) - Creates custom shapes
• Coordinates can use px, %, em, or calc() values
• Points are connected in order, last point connects to first
Coordinate System:
• (0% 0%) = top-left corner
• (100% 0%) = top-right corner
• (0% 100%) = bottom-left corner
• (100% 100%) = bottom-right corner
• (50% 50%) = center of element