Syntax
clip-path
Creating a clipping region.
Overview
| Class | Declarations |
|---|---|
clip-path:`value` | clip-path: `value`;
|
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;
|
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(`…`);
|
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="clip:inset(0|20px):hover clip:inset(0|20px)@sm clip:inset(0|20px)@dark clip:inset(0|20px)@print">…</div>