CSS Data Type - <basic-shape>
CSS <basic-shape> data type defines different shapes used for properties such as clip-path, shape-outside, and offset-path.
Possible Values
inset() − Represents an inset rectangle.
circle() − Represents a circle with a given radius and position.
ellipse() − Represents an ellipse with a given radius and position.
polygon() − Represents a polygon by defining its vertices as coordinates and an SVG fill-rule.
path() − Defines a custom clip path using SVG path data and SVG fill-rule.
Syntax
clip-path: inset( <length-percentage>{1,4} [ round <`border-radius`> ]? ) clip-path: circle( <shape-radius>? [ at <position> ]?); clip-path: ellipse([ <shape-radius>{2} ]? [ at <position> ]?); clip-path: polygon( <fill-rule>? [ <shape-arg> <shape-arg> ]# ); clip-path: path( [ <fill-rule>, ]? <string> );
Computed values of basic shapes
The <basic-shape> function computes values as specified, with the following exceptions:
Omitted values are included and computed using their defaults.
In a circle() or ellipse(), the <position> value is determined by a pair of offsets (horizontal and vertical) from the top-left origin, with each specified as a combination of absolute length and percentage.
Inset() calculates a <border-radius> value as an expanded list of all eight <length> or percentage values.
Interpolation of basic shapes
When animating between two <basic-shape> elements, interpolation follows rules where values in shape functions interpolate as a list containing <length>, <percentage>, or calc() elements. If list values are not of those types but are identical, will interpolate.
The reference box for both shapes must be the same.
When both shapes are of the same type, such as ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, then interpolate between each value within the shape functions.
If both shapes are inset() types, interpolate between their values in the shape functions.
When both shapes are of type polygon(), have an equal number of vertices, and use the same <fill-rule>, interpolate between the values in their shape functions.
When two shapes belong to the same path() type and have the same number and types of path data commands in the same order, interpolate each path data command as a real number.
In any other cases, no interpolation is used.
CSS <basic-shape> - inset()
The following example demonstrates the use of clip-path: inset(10% 10% 10% 10% round 10px 10px) property, which creates a square with rounded corners −
<html> <head> <style> .clip-inset { width: 150px; height: 150px; background-color: red; clip-path: inset(10% 10% 10% 10% round 10px 10px); } </style> </head> <body> <div class="clip-inset"></div> </body> </html>
CSS <basic-shape> - circle()
The following example demonstrates the use of clip-path: circle(50% at 50% 50%) property, which creates a circle with a radius of 50% of the element size. −
<html> <head> <style> .clip-circle { width: 150px; height: 150px; background-color: red; clip-path: circle(50% at 50% 50%); } </style> </head> <body> <div class="clip-circle"></div> </body> </html>
CSS <clip-path> - ellipse()
The following examples demonstrate that clip-path: ellipse(75px 40px at 50% 40%) property, which creates an ellipse shape −
<html> <head> <style> .clip-ellipse { width: 150px; height: 150px; background-color: red; clip-path: ellipse(75px 40px at 50% 40%); } </style> </head> <body> <div class="clip-ellipse"></div> </body> </html>
CSS <clip-path> - polygon()
The following examples demonstrate that clip-path: polygon() property, which creates a polygonal clip path with coordinates −
<html> <head> <style> .clip-polygon { width: 150px; height: 150px; background-color: red; clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%); } </style> </head> <body> <div class="clip-polygon"></div> </body> </html>
CSS <clip-path> - path()
The following examples demonstrate that the use of clip-path property is used with the path() to define a custom clip path using SVG path data −
<html> <head> <style> .clip-area { width: 150px; height: 150px; background-color: red; clip-path: path('M 150 150 L 0, 100 L 200,100 z'); } </style> </head> <body> <div class="clip-area"></div> </body> </html>
CSS Animated Polygon
The following example demonstrates the use of @keyframes at-rule to animate the shape, along with a transition of the shape. The clip-path property helps in changing the shape from one form to another. −
<html> <head> <style> .clip-polygon { width: 150px; height: 150px; background: blue; clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; } @keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0); } } </style> </head> <body> <div class="clip-polygon"></div> </body> </html>
To Continue Learning Please Login
Login with Google