offset-path

Definition

offset-path is a CSS property that defines a path along which an element should be positioned when using the offset property in combination with other offset properties like offset-anchor, offset-distance, or offset-position. The path can be defined using SVG path data or the path() function.

Examples

In this example, the offset-path property is set to a circular path with a radius of 50% of the element's containing block, centered at 50% of the x-axis and 50% of the y-axis:

.element {
  position: absolute;
  offset: 20px;
  offset-path: circle(50% at 50% 50%);
}

In this example, the offset-path property is set to a quadratic Bezier curve using SVG path data:

.element {
  position: absolute;
  offset: 20px;
  offset-path: path('M 100 200 Q 200 100 300 200');
}

In this example, the offset-path property is set to a quadratic Bezier curve using the path() function:

.element {
  position: absolute;
  offset: 20px;
  offset-path: path('M 100 200 Q 200 100 300 200');
}

Values

Best Practices

• Use offset-path in conjunction with other offset properties to position an element along a custom path.
• Be mindful of the path's shape and how it will affect the element's position.
• Avoid using offset-path with paths that have sharp corners or abrupt changes in direction, as it can cause the element to jump or jitter.
• Test your designs on different devices and screen sizes to ensure that the element is positioned correctly.
• Be mindful of performance when using offset-path, as it can cause layout and rendering issues on complex or animated elements.

Browser Compatibility