Syntax
Clip Path
Creating a clipping region.
🚧This page is still under construction and some content may not be complete.
Overview
| Class | Declarations |
|---|---|
clip-path:value | clip-path: value; |
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(…); |
clip:none | clip-path: none; |
clip:margin | clip-path: margin-box; |
clip:border | clip-path: border-box; |
clip:padding | clip-path: padding-box; |
clip:content | clip-path: content-box; |
clip:fill | clip-path: fill-box; |
clip:stroke | clip-path: stroke-box; |
clip:view | clip-path: view-box; |
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="clip:inset(0|20px):hover clip:inset(0|20px)@sm clip:inset(0|20px)@dark clip:inset(0|20px)@print">…</div>