CSS <basic-shape> Data Type
In CSS the
<basic-shape> value type represents a basic shape that is defined using a basic shape function.
Basic shapes can be used as a value for properties such as
shape-outside to control the flow of content around the element, and
clip-path to clip the element's contents to the basic shape.
This means you can do things like, have text flowing around the element in the shape that you specify, have an image clipped to that shape, etc.
When using this syntax to define shapes, the reference box is defined by each property that uses
Basic Shape Functions
Here are the basic shape functions. These are the functions that can be used to define a
- Defines an inset rectangle.
- Defines a circle.
- Defines an ellipse.
- Defines a polygon.
Using Basic Shapes
In the CSS specifications, whenever you see that a property accepts the
<basic-shape> value type, this means that it accepts any of the basic shape functions.
For example, the
shape-outside property accepts the following value/s:
So you could write something like this:
Here's a working example:
Computed Values of Basic Shapes
The values in a basic shape function are computed as specified, with these exceptions:
- Omitted values are included and compute to their defaults.
ellipse()is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
inset()is computed as an expanded list of all eight
or percentage values.
Using Basic Shapes with Animation
You can use CSS animations to interpolate between one shape and another.
When interpolating between different shapes, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as length, percentage, or calc where possible*.
If list values are not one of those types but are identical (such as finding
nonzero in the same list position in both lists) those values do interpolate.
- Both shapes must use the same reference box.
- If both shapes are the same type, that type is
ellipse(), and none of the radii use the
farthest-sidekeywords, interpolate between each value in the shape functions.
- If both shapes are of type
inset(), interpolate between each value in the shape functions.
- If both shapes are of type
polygon(), both polygons have the same number of vertices, and use the same
<fill-rule>, interpolate between each value in the shape functions.
- In all other cases no interpolation is specified.
* When both values are lengths, interpolated as lengths; when both values are percentages, interpolated as percentages; otherwise, both values are converted into a
calc() function that is the sum of a length and a percentage (each possibly zero), and these
calc() functions have each half interpolated as real numbers.
<basic-shape>data type is defined in CSS Shapes Module Level 1 (W3C Candidate Recommendation, 20 March 2014)