How to create complex shapes using clip-path in CSS?

Yes, you can create these all shapes using clip-path in CSS.

Ajay Yadav's photo
Ajay Yadav
Β·May 10, 2022Β·

3 min read

How to create complex shapes using clip-path in CSS?
Play this article

There and many properties that are used to create this shape but we are going to create all these shapes using the π—½π—Όπ—Ήπ˜†π—΄π—Όπ—»( ) function in the clip-path.

Syntax of the polygon function: clip-path: π—½π—Όπ—Ήπ˜†π—΄π—Όπ—»( x y, x y, x y, ...);

NOTE:

  • x and y together form a point.

  • x and y are the values of x and y coordinates.

let's create these shapesπŸ‘‡

Suppose this is the container in which we are going to draw our shape using the clip-path. clip-path@2x (1).png

In this container, there are 4 corners or points. clip-path@2x (2).png

So now we have to specify the coordinates of each corner or point of the container. ttt.jfif

We will always measure the distance for a point from the top left corner point.

Now, we have to find the coordinates of the points. The coordinate of this point is (0 0) which means x=0% and y=0% 1.jpg

And this is the axis of the container in which we are going to create our shape.

In this image, you can see, that there are 4 points displayed here.

  • top left point

  • top right point

  • bottom left point

  • bottom right point

2.jpg

Now we have to find the coordinates of these all 4 points.

  • top left point β†’ x = 0%, y = 0%

  • top right point β†’ x = 100%, y = 0%

  • bottom left point β†’ x = 0%, y = 100%

  • bottom right point β†’ x = 100%, y = 100%

We can also omit the percent(%) sign from 0.

3.jpg

Also, we can put points anywhere in this container, such as the middle point.

So, here the value of x and y = 50%

4.jpg

Now we are going to create a triangle shape, but you can create any shape using this technique.

To create a shape, first of all, we have to highlight the point of the desired shape.

5.jpg

Now we have to do numbering those points serial-wise, either clockwise or anti-clockwise.

I have numbered these points clockwise. 6.jpg

Now all those points we have to write serial-wise(either clockwise or anti-clockwise) in CSS otherwise, your shape will not be drawn as per your requirement.

7.png

After that, we have to measure those points from the top-left point of the container.

  • point number 1 β†’ x = 50%, y = 0%
  • point number 2 β†’ x = 100%, y = 100%
  • point number 2 β†’ x = 0%, y = 100%

8.jpg

So finally, this is the clip-path value that is used to create a triangle shape.

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

πŸ‘€ Here is the codepen link for this shape.

Did you find this article valuable?

Support Ajay Yadav by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Β 
Share this