About this series: Starting from 2021, I wanted to read a bit more of on web development with the goal of improving my english and web developing skills. In order to keep this knowledge, I thought it would be a good exercise to summarize this stuff in blog posts
What does it do?
Modern websites are using diagonal elements a lot more, than in the past. One of the ways to achieve this, is to use the clip-path property in css.
clip-path actually allows you to hide certain parts of SVGs or any other elements, so that they will have a certain form like a triangle, a circle or a pentagon.
As the the name already suggests, the
circle() value, allows to create a circular clipped form:
clip-path: circle(30% at 50% 50%);
Where the first value would determine the size of the circle or the radius in other terms. the two values after “at” would specify the center of the circle
polygon() values just consist of all the points used in the polygon, and each of them is specified as “X% Y%” (obviously Pixel values can also be used, but I tend to always use relative values if possible).
So for an pentagon this would look like this:
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
At the time of the publish date of this blog (01-2021), according to the MDN Webdocs the clip-path feature on HTML elements was supported on all browsers, except Internet Explorer:
Although using clip-path on SVG would be available there too
The must go resource in term of clip-path for me is the clip-path maker over at bennettfeely.com: https://bennettfeely.com/clippy/