path() | Frontend Practical Guide

Overview

The path() CSS shape function creates a shape for clip-path, shape-outside, and the SVG attribute d.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.types.basic-shape.path`	52	79	72	13.1	52	13
CSS type
`path.clip-path` 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
`path.d` The d attribute defines a path to be drawn.	52	79	97		52
`path.offset-path` 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
`path.shape-outside` 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.

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.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');
}

CSS starshapeclip demo.

CSS -tshape demo.

CSS arrowshape demo.

Using path()
The path() CSS shape function creates a shape for clip-path, shape-outside, and the SVG attribute d.