shape() CSS function

Syntax

/* <fill-rule> */
clip-path: shape(nonzero from 0 0, line to 10px 10px);

/* <move-command>, <line-command>, and close */
offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close);

/* <hvline-command> */
offset-path: shape(from 10px 10px, hline by 50px, vline to 5rem);

/* <curve-command> */
offset-path: shape(
  from 10px 10px,
  curve to 80px 80px with 160px 1px / 20% 16px
);

/* <smooth-command> */
offset-path: shape(from 10px 10px, smooth to 100px 50pt);

/* <arc-command> */
offset-path: shape(
  from 5% 0.5rem,
  arc to 80px 1pt of 10% ccw large rotate 25deg
);

/* Using a CSS math function */
offset-path: shape(
  from 5px -5%,
  hline to 50px,
  vline by calc(0% + 160px),
  hline by 70.5px,
  close,
  vline by 60px
);

clip-path: shape(
  evenodd from 10px 10px,
  curve to 60px 20% with 40px 0,
  smooth to 90px 0,
  curve by -20px 60% with 10% 40px / 20% 20px,
  smooth by -40% -10px with -10px 70px,
  close
);

Parameters

<fill-rule> Optional

Specifies how overlapping regions of a shape should be filled. The possible values include:

• nonzero: A point is considered inside the shape if a ray drawn from the point crosses more left-to-right than right-to-left path segments, resulting in a non-zero count. This is the default value when <fill-rule> is omitted.

• evenodd: A point is considered to be inside the shape if a ray drawn from the point crosses an odd number of path segments. This means that for each time the ray enters the shape, it has not exited an equal number of times, indicating an odd count of entries without corresponding exits.

Warning: <fill-rule> is not supported in offset-path and using it invalidates the property.

from <coordinate-pair>

Defines the starting point of the first <shape-command> as a pair of coordinates that are measured from the top-left corner of the reference box. The coordinates are specified as space-separated <x> <y> <length-percentage> values representing the left offset and top offset, respectively. Percentage values are relative to the width and height of the element's reference box, respectively. Add a comma after this parameter.

<shape-command>

Specifies a list of one or more comma-separated commands that define the shape, using syntax similar to SVG path commands. Commands include <move-command>, <line-command>, <hv-line-command>, <curve-command>, <smooth-command>, <arc-command>, and close. Each command's starting point is the previous command's ending point, with the first point of the shape defined by the from <coordinate-pair> parameter.

Shape commands

The syntax of most shape commands is a keyword that provides a directive, such as move or line, followed by the by or to keyword, and a set of coordinates.

• by: Indicates that the <coordinate-pair> is relative to the command's starting point (a "relative" value).
• to: Indicates that the <coordinate-pair> is relative to the top-left corner of the reference box (an "absolute" value).

The following <shape-command>s can be specified:

<move-command>

Specified as move [by | to] <coordinate-pair>. This command adds a MoveTo command to the list of shape commands. It draws nothing; instead, it specifies the starting position for the next command. The by or to keyword specifies whether the <coordinate-pair> point is relative or absolute, respectively. If the <move-command> follows the close command, it identifies the starting point of the next shape or subpath.

<line-command>

Specified as line [by | to] <coordinate-pair>. This command adds a LineTo command to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The by or to keyword specifies whether the ending point specified by <coordinate-pair> is relative or absolute, respectively.

<hv-line-command>

Specified as [hline | vline] [by | to] <length-percentage>. This command adds a horizontal (hline) or vertical (vline) LineTo command to the list of shape commands. With hline, a horizontal line is drawn from the command's starting point to or by the x position defined by <length-percentage>. With vline, a vertical line is drawn from the command's starting point to or by the y position defined by <length-percentage>. The by or to keyword determines the relative or absolute ending point, respectively. This command is equivalent to <line-command> with one coordinate value set by the single <length-percentage> and the other coordinate value remaining unchanged from its starting command.

<curve-command>

Specified as curve [by | to] <end-point> with <control-point> [/ <control-point>]. This command adds a Bézier curve command to the list of shape commands. The by or to keyword determines whether the ending point of the curve, specified by the <end-point>, is relative or absolute.

The with keyword specifies the control points of the Bézier curve as follows.

• If only a single <control-point> is provided, the command draws a quadratic Bézier curve, which is defined by three points (the start point, control point, and end point).
• If two <control-point> values are provided, the command draws a cubic Bézier curve, which is defined by four points (the start point, two control points, and the end point).

Valid values for <end-point> include:

<position> keywords or a <coordinate-value-pair>

Can be used if the curve end point is absolute (specified using to).

<coordinate-value-pair>

Can be used if the curve end point is relative (specified using by).