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>
Advertisements