How to use CSS clip-path to create polygonal shapes

CSS clip-path allows you to cut an HTML element into any shape using a polygon definition. You will define a series of X and Y coordinates to create the desired geometry. This method replaces standard border tricks and works on any element type.

Prerequisites

• A modern web browser that supports CSS clip-path (Chrome 78+, Firefox 70+, Safari 11+).
• An HTML file with basic CSS styling knowledge.
• A code editor like VS Code or Sublime Text.

Step 1: Create a basic element

Start by creating a simple HTML element that you will cut into a shape. You need a block-level or inline-block element to see the result clearly. Add some padding and background color to make the shape visible.

<div class="shape">
  Content
</div>

.shape {
  width: 200px;
  height: 200px;
  background-color: blue;
  padding: 20px;
  color: white;
  text-align: center;
  line-height: 1.5;
}

Save this code in a file named index.html and open it in your browser. You will see a blue square with text inside.

Step 2: Define the polygon syntax

Add the clip-path property to your CSS rule. The property accepts a polygon() function with a list of coordinates. Each coordinate is a pair of X and Y values separated by a comma. The first value is the horizontal position, the second is the vertical position.

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

This specific set of coordinates creates a rectangle. The browser interprets percentages relative to the element's size. Use 0% for the top-left corner, 100% for the bottom-right corner.

Step 3: Create a triangle

Change the coordinates to form a triangle. A triangle requires three points. Set the top-left and top-right points at the top edge, then place the bottom point at the center of the bottom edge.

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

Reload the page. The blue square is now a blue triangle pointing downwards. The content inside the shape is automatically clipped to match the new geometry.

Step 4: Create a star shape

A star requires more points to define its spikes. Use a higher number of coordinates to create the inward and outward angles. For a five-pointed star, you need ten points. Calculate the angles based on the center of the shape.

.shape {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

Reload the page to see the star. The coordinates define the outer tips and inner valleys of the star. Adjust the percentages slightly to make the star more symmetrical or pointy.

Step 5: Create a flag shape

Create a flag by defining a polygon with a wavy edge. Use alternating high and low Y values on the right side of the shape. Keep the left side straight for the pole attachment.

.shape {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 10%,
    90% 20%,
    100% 30%,
    90% 40%,
    100% 50%,
    90% 60%,
    100% 70%,
    90% 80%,
    100% 90%,
    90% 100%,
    0% 100%
  );
}

Reload the page. The shape now looks like a waving flag. The alternating coordinates create the wave pattern. You can adjust the percentage gaps to make the waves larger or smaller.

Step 6: Use a circle approximation

While clip-path does not support true circles, you can approximate one using many points. A 32-point polygon looks very close to a circle. This method is useful for creating rounded shapes without using border-radius.

.shape {
  clip-path: polygon(
    50% 0%,
    64% 2%,
    78% 7%,
    91% 15%,
    100% 27%,
    100% 40%,
    98% 53%,
    94% 66%,
    88% 78%,
    81% 89%,
    73% 98%,
    64% 100%,
    50% 100%,
    36% 100%,
    27% 98%,
    19% 89%,
    11% 78%,
    4% 66%,
    0% 53%,
    0% 40%,
    2% 27%,
    9% 15%,
    22% 7%,
    36% 2%,
    50% 0%
  );
}

Reload the page. The shape appears as a perfect circle. The symmetry of the points around the center creates the illusion of a round edge.

Verify the installation

Check if your browser supports the clip-path property. Open the browser console and type the following command. If you see "true", the browser supports the feature.

console.log('CSS clip-path supported:', 'clip-path' in document.createElement('div').style);

If the result is false, your browser is too old. Update your browser or use a modern alternative. Most current browsers support this feature natively without prefixes.

Troubleshooting

If the shape does not appear, check the content overflow. By default, browsers clip the content to the new shape. You may need to adjust the text size or use a pseudo-element for text. If the shape is not visible, ensure the background color is set. If the shape is cut incorrectly, verify the coordinate order. Coordinates must be listed in a continuous path around the perimeter.

If you need to preserve the original background behind the clipped area, use a pseudo-element. Create a separate element for the background and clip only the content layer. This prevents the background from being cut along with the shape.

If the shape looks distorted, check the parent container's overflow property. Set overflow: visible on the parent to ensure the clipped shape is not hidden. Ensure the element has a defined width and height, as clip-path does not work on elements with zero dimensions.

For complex shapes, break them into smaller polygons. A single polygon with too many points may cause rendering issues in older browsers. Split the shape into two overlapping polygons if necessary. This improves performance and compatibility.