Web development and Tech news Blog site. WEBISFREE.com

HOME > css

[CSS] Learn the CSS property clip-path. Circles, ellipses, polygons

Last Modified : 25 Feb, 2023 / Created : 25 Feb, 2023
686
View Count
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, circle
First, 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, ellipse
Creating 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 polygon
To 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.
Perhaps you're looking for the following text as well?

    Previous

    CSS Property text-decoration

    Previous

    Resolving the issue of using "position: fixed" CSS property with a parent element that has "position: relative"