We'll take a look at clip-path, which is one of the CSS style properties that is very useful when used, but wasn't used much in the past. It wasn't widely used in the past due to browser support issues, but most of the major browsers now support
clip-path. However, since the clip property has been deprecated, it's best to use clip-path instead.
# Learning css clip-path
The clip-path CSS property can be used on an element to show only the desired area as if it were cut out with scissors, such as a circle, ellipsis, or polygon. To put it simply, you can show an element in a shape of a circle or a star, or even create a shape like a car.
"Using clip-path makes it easy to implement circular, elliptical, and polygonal areas."
By the way, the reason I wrote "showing by cutting out" is because when you change the mouse cursor of the area using values such as pointer: cursor;, the part actually cut out doesn't apply the styles of cursor change. Please keep this in mind.
First, let's take a look at the simple syntax.
clip-path: circle(value);
// value : radius
clip-path: ellipsis(value, value);
clip-path: polygon(value value, ...);As you can see, the syntax is very simple. Choose the supported circle(), ellipse(), and polygon(), and declare only the values inside. Now let's create some examples and learn more.
! clip-path examples
Below are some examples to see how they are actually implemented. First, let's create a circle, an ellipse, and a polygon using css clip-path.
@ Creating a circle with clip-path, circleFirst, let's look at how to cut and create a circle shape. Here's an example of creating a tag with the class name "test-path" and making the desired shape. Let's create a circle below.
<div class="test-path test-path-circle">
clip-path : Circle
</div>
Now, let's apply the style attributes as follows to create a circle. The top is the attribute to be applied commonly, and the one below is the style to be applied to distinguish between circles, ellipses, and polygons.
.test-path {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-weight: bold;
background: #ff7777;
}
.test-path-circle {
clip-path: circle(100px);
}
If you implement the above example to create a circle of radius 100px, 50px, and 25px, respectively, they will look like the following.
<div class="test-path test-path-circle-1">
clip-path : Circle
</div>
<div class="test-path test-path-circle-2">
clip-path : Circle
</div>
<div class="test-path test-path-circle-3">
clip-path : Circle
</div>
<style>
.test-path {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #ff7777;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-circle-1 {
clip-path: circle(100px);
}
.test-path-circle-2 {
clip-path: circle(50px);
}
.test-path-circle-3 {
clip-path: circle(25px);
}
</style>
Each circle was created. Next, let's create an ellipse.
@ Creating an ellipse with clip-path, ellipseCreating an ellipse is similar to the previous example. For an ellipse, you need to pass the length of the top, bottom, left, and right. Apply the css as follows.
.test-path-ellipse {
width: 200px;
height: 200px;
clip-path: ellipse(100px 50px);
}
If you implement the above example, you will get the following ellipses.
<div class="test-path-ellipse test-path-ellipse-1">
ellipse(100px 50px)
</div>
<div class="test-path-ellipse test-path-ellipse-2">
ellipse(50px 100px)
</div>
<style>
.test-path-ellipse {
width: 200px;
height: 200px;
clip-path: circle(100px);
background: #77c7ff;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-ellipse-1 {
clip-path: ellipse(100px 50px);
}
.test-path-ellipse-2 {
clip-path: ellipse(50px 100px);
}
</style>
As you can see, ellipses work similarly to circles and can be implemented. Finally, let's create a polygon using the polygon.
@ Creating a polygonTo create a polygon, use the polygon and separate each value with a comma. Think of it as creating a shape by connecting each comma, and be careful that the order may also affect the shape. Now let's create some shapes below...
First, let's create a triangle shape.
.test-path-polygon-1 {
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
Implementing the above code will result in the following.
<div class="test-path-polygon test-path-polygon-1">
polygon(100px 0px, 200px 200px, 0 200px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-1 {
clip-path: polygon(100px 0px, 200px 200px, 0 200px);
}
</style>
Next, let's create a diamond shape.
.test-path-polygon-2 {
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
When implemented, it will appear as shown below.
<div class="test-path-polygon test-path-polygon-2">
polygon(100px 0px, 200px 100px, 100px 200px, 0 100px)
</div>
<style>
.test-path-polygon {
width: 200px;
height: 200px;
background: green;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.test-path-polygon-2 {
clip-path: polygon(100px 0px, 200px 100px, 100px 200px, 0 100px);
}
</style>
The diamond shape can also be easily implemented.
So far, we have looked at several examples using the clip-path property. Using clip-path has the advantage of easily implementing simple shapes. As mentioned above, it should be noted that the area where clip-path is applied includes the click area and if text is included, it will be cut off in the same way.