por The web design process almost always requires the transformation of elements. Whether it is its location, color, thickness or shape, a designer is constantly manipulating the elements of his website. On this occasion, we will teach you how to use property clip-path CSS to modify the shape of your elements.
What is the CSS clip-path property?
The CSS clip-path property, when inserted inside an element, allows us to cut the element based on a geometric shape. That is, this property helps us define exactly which region of the element will be visible and in what way. So, the content within the property section clip-path CSS (click path) will be visiblewhile all the content outside will be hidden.
Below we explain exactly how it works.
How does the CSS clip-path property work?
The property clip-path CSS (path css) works from keywords that define the shape and values that determine its characteristics. Each of the keywords that we show you below represents a way of creating the path that will define the limit of the cut. Most of these routes are a geometric shape.
circle
By inserting this keyword we define a cutout in the shape of a circle. Next to this word, we must define three values inserted inside parentheses:
The first value is the size of the cutout.
The second is your location in the width of the element.
The third is your location at the height of the element.
These values can be given in many units of measurement, but the most common are pixels and percentage. So, we could define a clipping with the following line of code:
clip-path: circle (10% at 90% 70%)
eclipse
Similar to option circle, the option eclipse of the property clip-path CSS ( clipath ) allows us to define an ellipse using four values. The first two represent two radii, one vertical and one horizontal, and the last two represent the position values.
As in the previous option, we can define the radii and positions using pixels and percentages, and we can even mix measurement units.
polygon
The option polygon It allows us to create a cutout in the shape of a polygon. To do this, It is enough to define the set of vertices that the element will have. So, we can create any type of shape just by defining the location of its vertices. We can, for example, create a pentagon by defining the following five vertices with the unit of percentage:
clip-path: polygon (50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
The vertices of a polygon in CSS are separated with commas. The first value of the vertex represents its location on the horizontal (x) axis, while the second value represents the location of the vertex on the vertical (y) axis. We invite you to review how to create different polygons in this simulator.
path
This option allows us to create a path to design all types of shapes and even determine the path of an animated object. We invite you to learn more about this option and its SVG rules on the official Mozilla Developer Network page.
inset
This option creates a cutout inside the element in the shape of a rectangle. Unlike the polygon option, with the inset We do not define the position of the vertices of the rectangle, but rather we define their distance from the edges of the element. So, we can use any positive CSS measurement unit to define the distance of each edge of the rectangle from the edge of the element.
Since this option creates a rectangle, we can define one, two or four values. If we insert a single value, all sides of the rectangle will move away from the edge. If we define two values, the first will affect the top and bottom side of the rectangle, while the second value will affect the left and right side of the rectangle. Finally, if we insert four valuesthe first is the top side, the second is the right side, the third is the bottom side and the fourth is the left side.
In addition to values that represent the distance from the element’s edge, we can make our rectangles have rounded edges using the keyword round. Then, after inserting the distance values, we insert the word round and then the curve values that we want to give, either to all the edges or to each one separately.
Keep in mind that if you insert four curve values, The order will be in a clockwise direction starting from the upper left corner. If you insert only one value it will be applied to all corners. But if you insert two values, the first value will affect the top left corner and the bottom right corner, while the second value will affect the top right corner and the bottom left corner. We invite you to play with these options on the feature page inset of the MDN.
What is the next step?
Now that you know how to use the property clip-path of CSS to create clippings in HTML elements, The next step is to apply this knowledge on your own website! Therefore, we invite you to be part of our Full Stack Web Development Bootcamp. There, in addition to continuing to learn about CSS and web programming languages, you will create and design your own lines of code with the guidance of our teachers. Thus, at the end of the bootcamp, you will be an expert in web development and you will have how to prove it with your own website. Sign up now!