CSS clip-path property

The primary purpose of the clip-path property is to create a clipping region that sets which part of an element should be visible. Think of it as a mask where only the defined region is shown, and everything outside of it is hidden.

Syntax and Values

The basic syntax for the clip-path property is:

clip-path: <value>;

The values it can take include:

  • Keyword values: The most straightforward is none, which means no clipping is applied.
  • <clip-source> values: For example, url(resources.svg#c1), which references a specific SVG clipPath element.
  • <geometry-box> values: These include margin-box, border-box, etc., which define the reference box for the clipping region.
  • <basic-shape> values: These are predefined shapes like inset(), circle(), ellipse(), polygon(), and path().

Using Basic Shapes

Basic shapes provide a simple way to define clipping regions:

  • inset(): This defines an inset rectangle. For instance, clip-path: inset(10% 20% 30% 40%) clips the element with the specified offsets.
  • circle(): It defines a circle. Example: clip-path: circle(50% at 50% 50%) creates a circle centered in the middle of the element.
  • ellipse(): Like circle but for ellipses. clip-path: ellipse(50% 25% at 50% 50%) creates an ellipse.
  • polygon(): Defines a polygon. clip-path: polygon(0% 0%, 100% 0%, 50% 100%) creates a triangle.
  • path(): This is for more complex shapes using SVG path definitions.

Geometry Boxes

The reference box for the basic shape determines the coordinates’ system:

  • margin-box: Outermost box, including margins.
  • border-box: Includes the border.
  • padding-box: Up to the padding edge.
  • content-box: Just the content.
  • fill-box: Uses the object bounding box as reference.
  • stroke-box: Considers the stroke of the SVG.
  • view-box: Uses the SVG’s view box.

Practical Examples

When using clip-path with HTML, it’s applied directly to the element. With SVG, it references a clipPath element. For instance, a circle clip in HTML might be clip-path: circle(50%), while in SVG, you’d define a clipPath element and reference it with url(#myClip).

Comparatively, SVG offers more flexibility, especially for complex shapes, but HTML is more straightforward for simple clippings.

Browser Compatibility

Most modern browsers support the clip-path property. However, it’s always a good idea to check compatibility tables and test across browsers. For unsupported browsers, consider fallback designs or polyfills.