path()
The path() CSS function accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a <basic-shape> data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute.
There are some limitations to using the path() function. The path has to be defined as a single string, so a custom path can't be created using variables (var() functions). Also, all the lengths in the path are implicitly defined in pixel (px) units; other units can't be used. The shape() function offers more flexibility than the path() function.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 52 | 79 | 72 | 13.1 | 52 | 13 | |
| CSS type | ||||||
| The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. | 88 | 88 | 72 | 13.1 | 88 | 13 |
| The d attribute defines a path to be drawn. | 52 | 79 | 97 | | 52 | |
| The offset-path CSS property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves. | 56 | 79 | 72 | 16 | 56 | 16 |
| The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than rectangular boxes. | | | | | | |
- Available with a vendor prefix: -webkit- (10.1)
- Available with a vendor prefix: -webkit- (10.3)
- Available with a vendor prefix: -webkit- (10.1)
- Available with a vendor prefix: -webkit- (10.3)
Syntax
.star {
clip-path: path('M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z');
}Live demo
Use cases
-
Using path()
The path() CSS function accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.