This blog is to help emerging front-end developers learn how to make CSS shapes- including myself! I believe that this is a skill worth learning if we wish to design websites to our liking. I have taken my inspiration from Afif's article The Modern Guide For Making CSS Shapes to help others learn how to make shapes of their choosing using Cascading Style Sheets (CSS).
The author of the article introduces readers to the possibility of using the elements of CSS to produce a shape instead of designing a shape the old-fashioned way. For example, Afif's guide suggests we can provide 4 points and cut the element instead of making 6 points for designing a hexagon. This means we can use CSS to think outside of a shape's boundaries to simplify the shape-designing process. Two key take away tips I've learned from this article are:
The polygon() function accepts points outside the [0% 100%] range. Using this function lets us clip shapes with fewer points
but also opens up possibilities for creating additional shapes.Switching axes is a reliable approach for creating shape variations.
I am not able to fully describe how CSS can be used to design every shape and for that reason, I will link to Afif's guide in this blog for anyone that needs it for future reference! I wish the best of luck to anyone stumbling upon this blog.
This post was heavily inspired from:
Afif, T. (2024, May 10) The Modern Guide For Making CSS Shapes
Retrieved from: [https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/]
Top comments (0)