pelicin › web › CSS

Basic Shape

The basic shape data type represents a shape.

Shape Functions

inset(...)

Defines an inset rectangle (like specifying a negative margin). Specify:

  • 1 to 4 offsets (corresponding to the top, right, bottom, and left offsets) in lengths or percentages
  • a border radius (optional) — e.g. round 5px.
div {
  clip-path: inset(22% 12% 15px 35px);
  clip-path: inset(22% 12% 15px 35px round 5px);
}

circle(...)

Defines a circle. Specify:

  • the radius in length or percentage (optional, default is closest-side) — e.g. 20px, closest-side, farthest-side
  • the center coordinate (optional, default is center) — e.g. at 12rem 8rem
div {
  clip-path: circle(6rem at 12rem 8rem);
}

ellipse(...)

Defines an ellipse. Specify:

  • the x-radius and y-radius in length or percentage (optional, default is closest-side for both radii)
  • the center coordinate (optional, default is center) — e.g. at 12rem 8rem
div {
  clip-path: ellipse(115px 55px at 50% 40%);
}

polygon(...)

Defines a polygon. Specify:

  • the filling rule of the polygon (optional, default is nonzero) — specify nonzero (always fill interior) or evenodd (a shape is considered "outside" if it has even path segments)
  • one or more coordinates in lengths or percentages, separated by comma
div {
  clip-path: 50% 2.4%, 34.5% 33.8%, 65.5% 33.8%;
}

path(...)

Defines a path. Specify:

  • the filling rule of the polygon (optional, default is nonzero) — specify nonzero (always fill interior) or evenodd (a shape is considered "outside" if it has even path segments)
  • SVG path string — e.g. M 50,245 A 160,160 0,0,1 360,120 z
div {
  clip-path: path('M 50,245 A 160,160 0,0,1 360,120 z');
}

References