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:
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
border-box, etc., which define the reference box for the clipping region.
<basic-shape>values: These are predefined shapes like
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.
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.
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
Comparatively, SVG offers more flexibility, especially for complex shapes, but HTML is more straightforward for simple clippings.
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.