CSS Clip-Path
CSS Clip-Path property defines the element area that should be visible and creates a clipping region. It is possible to see the area inside the region, while it is impossible to see the area outside the region. Borders, text shadows, and other elements outside the clipping will all be removed by browsers.
Instead of showing the entire area, it enables us to specify a specific area of the element to display. The keywords ellipse, circle, polygon, or inset make it simpler to clip the fundamental shapes.
The CSS clip-path has four values:
- clip-source
- basic-shape
- geometry-box
- none
Clip-source: It is a url that references an SVG <clippath> element.
Basic-shape: The element is trimmed to a basic shape. The four fundamental shapes are a circle, an ellipse, a polygon, and an inset. It is a shape whose size and the value of the geometry-box property determine its position. Border-boxes will be used as reference boxes without geometry-box definitions.
Geometry-box: This specifies the boundary of the basic shape's reference box. It will serve as the reference box for the clipping carried out by the <basic-shape> if it is defined in combination with that shape.
It may have the following values:
Margin-box: You can use the margin-box as the reference box. It can be characterized as the shape indicated by the outside margin edge, including the shape's corner radius.
Border-box: It can serve as the border-reference box box. The outer border edge establishes this value.
Padding-box: The padding-box can serve as a reference box. It describes the shape that the outside padding edge encloses.
Content-box: It could serve as a reference box.
Fill-box: The object's bounding box may be utilized as the reference box.
Stroke-box: The reference box may be the stroke bounding box.
View-box: It uses the nearest SVG viewport as the frame of reference.
Defining Basic Shapes With Clip-path
There are four primary shapes, as was already mentioned. Let's go over each one with an example.
Polygon
It is one of the basic shapes that are available. Any number of points can be defined using it. The points are in a pair of coordinates with X and Y values in any unit, such as pixel- or percent-based.
The example below will enable us to understand this fundamental shape. The following example defines two types of polygons: a diamond-shaped polygon and a star-shaped polygon.
Understand the browser compatibility
Example
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.example {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.example1{
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
</style>
<body>
<center>
<h3> Clip-path property example </h3>
<img src="rose.png" class="example">
<h4>Diamond shape polygon</h4>
<p>clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</p>
<img src="rose.png" class="example1">
<h4>Star shape polygon</h4>
<p>clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);</p>
</center>
</body>
</html>
Circle
The circle(radius at posX posY) is the default syntax for defining a circle. The default setting for the position is 50% 50%, and it is optional.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.example {
clip-path: circle(50%);
}
.example1{
clip-path: circle(60% at 70% 20%);
}
</style>
<body>
<center>
<h2> Clip-path property example </h2>
<img src="rose.png" class="example">
<h3>clip-path: circle(50%);</h3>
<img src="rose.png" class="example1">
<h3>clip-path: circle(60% at 70% 20%);</h3>
</center>
</body>
</html>
Ellipse
The formula ellipse gives the definition of an ellipse (radiusX, radiusY, at, posX, posY). The position within it is optional and defaults to 50% 50%, just like the circle.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.example {
clip-path: ellipse(50% 35%);
}
.example1{
clip-path: ellipse(50% 65% at 70% 50%);
}
</style>
<body>
<center>
<h2> Clip-path property example </h2>
<img src="rose.png" class="example">
<h3> clip-path: ellipse(50% 35%);</h3>
<img src="rose.png" class="example1">
<h3> clip-path: ellipse(50% 65% at 70% 50%);</h3>
</center>
</body>
</html>
Inset
Using inset, we can create an inner rectangle that discards anything that lies outside of it. You can crop an image or an element more easily with it.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.example
{
clip-path: inset(20% 25% 20% 10%);
}
.example1
{
clip-path: inset(45% 0% 33% 10% round 10px);
}
</style>
<body>
<center>
<h2> Clip-path property example </h2>
<img src="rose.png" class="example">
<h3>clip-path: inset(20% 25% 20% 10%);</h3>
<img src="rose.png" class="example1">
<h3>clip-path: inset(45% 0% 33% 10% round 10px);</h3>
</center>
</body>
</html>
Adding Animation
To this property, animation can also be applied. With this CSS property, animations and transitions can create exciting effects.
Observe the following example to see how animation can be added to this property.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<style>
img.example {
animation: anime 4s infinite;
border: 5px dashed red;
}
@keyframes anime {
0% {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 70%);
}
20% {
clip-path: polygon(40% 0, 50% 0, 100% 100%, 0% 80%);
}
40% {
clip-path: polygon(0 0, 60% 72%, 100% 100%, 0 35%);
}
60% {
clip-path: polygon(70% 0, 20% 0, 100% 100%, 0% 80%);
}
80% {
clip-path: polygon(0 70%, 60% 0, 100% 32%, 0 40%);
}
100% {
clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 30%);
}
}
</style>
<body>
<center>
<h2> Animation in Clip-path property </h2>
<img src="rose.png" class="example">
</center>
</body>
</html>
