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>