Written on May 6, 2023 by Temani AfifWeb Developer

Estimated read time 5 minutes

In this article, we are going to build CSS Shapes! We will use clip-path combined with some math to generate polygon and starburst shapes.

I said “generate” because we are going to use generators to get the different shapes. Some shapes are complex and writing the code by hand is not an easy task so I have built online generators to help you get the different shapes by simply adjusting a few variables.

This said it’s also good to understand the logic behind the generated code.

CSS Polygon Shapes

Let’s start with polygons and the first online generator: css-generators.com/polygon-shape

All you have to do is to define the number of sides and the rotation. You also have the ability to create the border-only version and control the border thickness as well.

Here is a figure to illustrate the clip-path points of a polygon shape

We first consider a square element:

.box {
  width: 200px;
  aspect-ratio: 1;
}

Then, each point of the clip-path will be defined as follow:

x : 50% + 50%*cos(angle + (i * 360deg)/sides);
y : 50% + 50%*sin(angle + (i * 360deg)/sides);

sides is the variable that controls the number of sides. angle is the rotation. And i is the index of each point. If you are good at geometry you already noticed that we are evenly placing the points on a circle. The radius of the circle is half the element’s width and its center is the center of the element

Even if the logic is easy, it would be tedious to write all the code by hand especially if the number of sides is big. With the online generator, you get the code in no time.

Here are a few common CSS shapes you can get:

Triangle

clip-path: polygon(100% 50%,25.00% 93.30%,25% 6.70%);
/* OR */
clip-path: polygon(93.30% 75%,6.70% 75.00%,50% 0%);

Rhombus

clip-path: polygon(100% 50%,50% 100%,0% 50%,50% 0.00%);

Hexagon

clip-path: polygon(100% 50%,75% 93.30%,25% 93.30%,0% 50%,25% 6.70%,75% 6.70%);
/* OR */
clip-path: polygon(93.30% 75%,50% 100%,6.70% 75%,6.70% 25%,50% 0%,93.30% 25%);

Worth noting that, since we are using clip-path, we can have any kind of background and also apply the shape to an image.

The logic for the border-only version is similar but we will need more points to define the shape:

The outer points are the same as previously. The inner points will get placed considering another circle with a smaller radius.

x = 50% + (50% - border)*cos(angle + (i * 360deg)/sides);
y = 50% + (50% - border)*sin(angle + (i * 360deg)/sides);

The border variable is what controls the thickness.

Here we can clearly see that a generator is a life save because we have twice the number of points and it’s not easy to write all them manually. Not to mention, that the order of the points is important to get the final shape but no need to worry about it.

Here are a few examples:

CSS Starburst Shapes

Let’s move to the next generator. This time we will create starburst shapes (also called spiky shapes): css-generators.com/starburst-shape

Similar to the previous generator, all you have to do is to adjust a few variables and get the code. Here is a figure to illustrate the shape:

We are still placing points on circles but with a different logic. We alternate the placement: One point on the bigger circle then another point on the smaller circle.

x : 50% + 50%*cos(angle + (i * 360deg)/spikes);
y : 50% + 50%*sin(angle + (i * 360deg)/spikes);

Then:

x : 50% + (50% - size)*cos(angle + (i * 360deg + 180deg)/spikes);
y : 50% + (50% - size)*sin(angle + (i * 360deg + 180deg)/spikes);

Note how between the outer and inner points we have a shift equal to 180deg/spikes and a difference of distance equal to size.

What about the border-only version? we will keep adding more points?!

Yes! The number of points will keep increasing and the complexity of the code as well but you don’t need to worry about that because the online generator will do the job for you.

Here is how it looks for the border-only version

We logically have twice the number of points and four circles to use to place the different points. I won’t bother with the formula for this one but the logic is pretty similar to what we did with the border-only polygon shape. We first place the outer points then the inner points will use the same formula with a smaller radius.

Let’s not forget that we can create a Star shape using that generator:\

It is worth noting that if you make the size variable equal to 0 the Starburst shape will be a Polygon shape. So a starburst shape can be seen as a polygon where we move half of its points to be closer to the center. Geometry is fun!

Conclusion

In addition to the online generators, now you know the secret behind the code for creating Polygon and Starburst shapes. With a few clicks, you can easily generate a triangle, a hexagon, a rhombus, a star, etc. So many different CSS shapes.

Bookmark these two links and show me in the comment section the shapes you have created and how did you integrate them into your website.

• css-generators.com/polygon-shape

• css-generators.com/starburst-shape

If you want to learn more about clip-path you can refer to my article "CSS Tricks To Master The clip-path Property"

Frequently Asked Questions

Temani Afif is an expert web developer, a content creator, and a CSS addict. He is the mastermind behind CSS Loaders, CSS Generators, CSS Tip and many other CSS-related websites.

View more posts by Temani Afif