Triangle Image
Clip an image or colored element into a responsive triangle using three polygon points.
CSS Clip Path Generator
Free CSS Shape Tool
Create custom CSS clip-path polygon shapes visually. Add and position points on the canvas, choose a preset shape and copy clean responsive CSS code.
clip-path: polygon() shape.
Select a preset as a starting point, then customize its points on the canvas.
clip-path property to an image, section or UI element.
This CSS Clip Path Generator is a free visual editor for creating custom
polygon clipping shapes. Instead of calculating coordinates manually, you
can click and drag points on a canvas while the tool generates responsive
clip-path: polygon() CSS.
The generator also includes common presets such as triangles, diamonds, hexagons, stars, arrows, message bubbles and diagonal section shapes. These presets can be used directly or customized as starting points for more complex designs.
Clip an image or colored element into a responsive triangle using three polygon points.
A six-point polygon can create a geometric avatar, team photo or feature icon.
Clip the lower edge of a hero section to create a slanted transition into the next section.
Polygon points can create arrows for process steps, navigation controls and decorative interface elements.
Animate between compatible clip-path values to reveal an image or content block through a changing geometric mask.
The CSS clip-path property defines which part of an element
remains visible. Content inside the clipping region is shown, while content
outside it is hidden.
.element {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
The polygon() function connects a sequence of coordinate pairs.
Each pair contains a horizontal position followed by a vertical position.
.shape {
clip-path: polygon(
50% 0%,
100% 100%,
0% 100%
);
}
In this triangle example, the first point is centered at the top. The other two points define the bottom-right and bottom-left corners.
Percentage coordinates are usually the best choice for responsive shapes.
A coordinate of 0% 0% represents the top-left corner, while
100% 100% represents the bottom-right corner.
.diamond {
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);
}
.triangle {
clip-path: polygon(
50% 0%,
100% 100%,
0% 100%
);
}
.hexagon {
clip-path: polygon(
25% 0%,
75% 0%,
100% 50%,
75% 100%,
25% 100%,
0% 50%
);
}
.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 {
clip-path: polygon(
0% 30%,
70% 30%,
70% 0%,
100% 50%,
70% 100%,
70% 70%,
0% 70%
);
}
Clip path is frequently used to create slanted section edges without pseudo-elements or SVG files.
.hero {
padding: 6rem 2rem 10rem;
background: #2563eb;
clip-path: polygon(
0% 0%,
100% 0%,
100% 88%,
0% 100%
);
}
The clip-path property also supports basic shape functions
that do not require polygon coordinates.
.circle {
clip-path: circle(50% at 50% 50%);
}
.ellipse {
clip-path: ellipse(60% 40% at 50% 50%);
}
The inset() function clips an element inward from its outer
edges and can optionally create rounded corners.
.inset-shape {
clip-path: inset(10% 15% 10% 15% round 24px);
}
Clip path can be applied directly to an image. Use
object-fit: cover when the image must fill fixed dimensions.
.profile-image {
width: 280px;
height: 280px;
object-fit: cover;
clip-path: polygon(
25% 0%,
75% 0%,
100% 50%,
75% 100%,
25% 100%,
0% 50%
);
}
A normal box-shadow is clipped along with the element and may
not appear outside the shape. Use filter: drop-shadow() on a
wrapper when you need a shadow around the clipped outline.
.shape-wrapper {
filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .2));
}
.shape {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
Clip paths can be animated when the starting and ending polygon values contain the same number of points.
.reveal {
clip-path: polygon(
50% 50%,
50% 50%,
50% 50%,
50% 50%
);
transition: clip-path .6s ease;
}
.reveal:hover {
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
0% 100%
);
}
The clipping shape can affect which visible parts of the element respond to pointer interaction. Test clickable clipped elements carefully, especially when using unusual or narrow shapes.
Basic CSS clip-path shapes are broadly supported in modern browsers. A normal rectangular fallback is usually acceptable for older browsers that do not support the property.
Clip path changes only visual presentation. Important text should not be cut off or made difficult to read. Decorative clipped elements should not contain information that is available only through their shape.
Static polygon shapes are generally efficient. Very complex polygons and continuously animated clip paths can increase rendering work, especially when applied to large elements.
filter: drop-shadow() when the clipped outline needs a shadow.
The clip-path property defines which part of an element is
visible. Areas outside the clipping shape are hidden.
The polygon() function connects a list of coordinate points
to form a closed clipping shape.
A valid polygon requires at least three points.
Yes. Percentage coordinates scale relative to the element dimensions, making them suitable for responsive shapes.
Yes. You can apply clip path directly to images, videos, sections and most normal HTML elements.
Yes. Polygon shapes can transition smoothly when both states contain the same number of coordinate points.
The box shadow is clipped with the element. A wrapper with
filter: drop-shadow() is usually better for shadows that
follow the visible clipped shape.
Yes. Basic clip path shapes and polygons are supported by current major browsers.