CSS <shape> Data Type

The CSS <shape> data type represents a shape created with the shape() function. It uses a starting point followed by one or more drawing commands to construct lines, curves, arcs, and other path segments using CSS values and units.

Syntax

The <shape> data type is represented by the shape() function. A shape begins with a from position followed by a comma-separated list of drawing commands:

shape(from 10% 10%, line to 90% 10%, line to 50% 90%, close)

The coordinates can use CSS lengths, percentages, and calculations, allowing the shape to respond to the dimensions of its reference box.

shape() Function

The shape() function provides a CSS-native way to describe a path. Unlike a fixed sequence of SVG path coordinates, its commands can use CSS units such as percentages and can therefore create shapes that adapt to the size of an element.

clip-path: shape(
  from 10% 10%,
  line to 90% 10%,
  line to 50% 90%,
  close
);

This example creates a triangular clipping path whose coordinates scale with the element.

Starting Point

Every shape() path begins with a from value that establishes the initial position of the path.

shape(from 50% 0%, ...)

The first coordinate represents the horizontal position and the second represents the vertical position within the shape's reference box.

Shape Commands

After the starting point, commands define the segments that make up the shape. The available commands can create straight lines, horizontal and vertical lines, curves, smooth curves, arcs, and closed paths.

Command	Description
`line`	Draws a straight line to a specified position.
`hline`	Draws a horizontal line.
`vline`	Draws a vertical line.
`curve`	Draws a cubic Bézier curve using control points.
`smooth`	Draws a smooth Bézier curve using a reflected control point.
`arc`	Draws an elliptical arc to a specified position.
`close`	Closes the path by connecting the current point to the starting point.

Absolute and Relative Commands

Shape commands can use to to specify a destination relative to the shape's coordinate system or by to specify an offset from the command's starting point.

line to 80% 20%
line by 20px 30px

The to form identifies a destination position, while the by form describes how far to move from the current position.

<shape> Example

The following example uses shape() with clip-path to create a responsive triangular shape:

.shape-example {
  width: 220px;
  height: 180px;
  background: #0088cc;
  clip-path: shape(
    from 50% 0%,
    line to 100% 100%,
    line to 0% 100%,
    close
  );
}

Browser Result

The percentage coordinates allow the triangle to follow the dimensions of its reference box rather than relying on fixed coordinates.

The <shape> data type can be used with CSS properties that accept basic shape values, including:

Specifications

The shape() function represented by the <shape> data type is defined in the CSS Shapes Module Level 2 .

CSS <shape> Data Type