Shape

Clip Path

Style syntax for creating a clipping region.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
clip-path:value / clip:valueclip-path: value
clip:noneclip-path: none
clip:marginclip-path: margin-box
clip:borderclip-path: border-box
clip:paddingclip-path: padding-box
clip:contentclip-path: content-box
clip:fillclip-path: fill-box
clip:strokeclip-path: stroke-box
clip:viewclip-path: view-box
clip:inset()clip-path: inset()
clip:circle()clip-path: circle()
clip:ellipse()clip-path: ellipse()
clip:polygon()clip-path: polygon()
clip:path()clip-path: path()
clip:url()clip-path: url()

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="clip:inset(0|20px):hover clip:inset(0|20px)@sm clip:inset(0|20px)@dark clip:inset(0|20px)@print"></div>
PREVIOUS
Scroll Snap Type

Style syntax for setting how strictly snap points are enforced on the scroll container.

NEXT
Shape Image Threshold

Style syntax for setting the alpha channel threshold for a CSS shape.

MIT License © Aoyue Design LLC.