Custom Clip
All classes use the al- prefix and follow utility-first conventions.
Custom Clip 01
Initialize clipping using the .al-custom-clip-one class
Custom Clip One
Add inlay with .al-custom-inlay-one class.
Inlay
Add inlay size with .al-inlay-all-* class.
16px
Add inlay color with .al-inlay-bg-{color} or .al-inlay-bg-{color}-{opacity} class.
Secondary
Customize edges with .al-{corner}-*, .al-{side}-*, .al-extend-{side}-* class.
.al-ts-30 .al-t-25 .al-extend-t-100
For more customization, see the Clip Utilities section.
Copy
Custom Clip One
//Inlay
Inlay
//Inlay size
16px
//Inlay color
Secondary
//Customize edges
.al-ts-30 .al-t-25 .al-extend-t-100
Developer Notes
-
These utilities rely heavily on clip-path: polygon() and CSS custom properties.
-
Use .al-custom-clip-one, .al-custom-inlay-one for activating clipping logic.
-
Adjust --al-* variables to customize each direction: --al-t, --al-e, --al-b, --al-s.
-
Corner clipping uses --al-ts, --al-te, --al-bs, --al-be.
-
Extending Sides uses --al-extend-t, --al-extend-b, --al-extend-s, --al-extend-e.
-
Always pair clip styles with a fallback (e.g., border-radius, overflow: hidden) for compatibility.