Syntax

Clip Path

Creating a clipping region.

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

Overview

ClassDeclarations
clip-path:valueclip-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: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;

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>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.