Clip
Clipping Utilities offer advanced visual edge trimming and design edge customization using CSS clip-path. These classes allow developers to create dynamic polygonal clip paths, define corner shapes, and optionally add decorative borders and inlays using CSS custom properties.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Class | Description |
|---|---|
| .al-clip-both | Combines both border and inlay with center cliping. |
| .al-clip-border | Border with center cliping. |
| .al-clip-inlay | Inlay with center cliping. |
| .al-clip | Base class for polygon clipping. Requires directional sizing variables. |
| .al-both | Basic border + inlay on a full rectangle. |
| .al-border | Basic border on a full rectangle. |
| .al-inlay | Basic inlay on a full rectangle. |
| .al-corner | Enables only corner-based clipping. |
| .al-extend-* | Sets the center clip width. |
| .al-center-* | Sets the clip center position. |
| .al-border-* | Sets the border width and color. |
| .al-inlay-* | Sets the inlay width and color. |
| .al-* | Sets the clip size. |
Sass Reference
assets/scss/_clip.scss
Copy
Clip Center with Inlay & Border
Initialize center clipping, inlay, and border using the .al-clip-both class
Add directional clipping with: .al-t-clip-x, .al-e-clip-y, .al-b-clip-x, .al-s-clip-y, or use .al-clip-all for full clipping on all sides.
.al-clip-both .al-t-clip-x
.al-clip-both .al-e-clip-y
.al-clip-both .al-b-clip-x
.al-clip-both .al-s-clip-y
.al-clip-both .al-all-clip
.al-clip-both .al-all-clip .al-corner-all
Sizing center extend (.al-extend-t-* | .al-extend-e-* | .al-extend-b-* | .al-extend-s-* | al-extend-x-* | al-extend-y-* | al-extend-all-*)
Sizing center depth (.al-t-* | .al-e-* | .al-b-* | .al-s-* | al-x-* | al-y-* | al-all-*)
.al-clip-both .al-t-clip-x .al-extend-t-25
.al-clip-both .al-t-clip-x .al-t-25
.al-clip-both .al-t-clip-x .al-extend-t-75 .al-t-40
Copy
.al-clip-both .al-t-clip-x
.al-clip-both .al-e-clip-y
.al-clip-both .al-b-clip-x
.al-clip-both .al-s-clip-y
.al-clip-both .al-all-clip
.al-clip-both .al-all-clip .al-corner-all
.al-clip-both .al-t-clip-x .al-extend-t-25
.al-clip-both .al-t-clip-x .al-t-25
.al-clip-both .al-t-clip-x .al-extend-t-75 .al-t-40
Clip Center with Border
Initialize Center & Border using the (.al-clip-border) class
Add directional clipping with: .al-t-clip-x, .al-e-clip-y, .al-b-clip-x, .al-s-clip-y, or use .al-clip-all for full clipping on all sides.
.al-clip-border .al-t-clip-x
.al-clip-border .al-e-clip-y
.al-clip-border .al-b-clip-x
.al-clip-border .al-s-clip-y
.al-clip-border .al-all-clip
.al-clip-border .al-all-clip .al-corner-all
Sizing center extend (.al-extend-t-* | .al-extend-e-* | .al-extend-b-* | .al-extend-s-* | al-extend-x-* | al-extend-y-* | al-extend-all-*)
Sizing center depth (.al-t-* | .al-e-* | .al-b-* | .al-s-* | al-x-* | al-y-* | al-all-*)
.al-clip-border .al-t-clip-x .al-extend-t-25
.al-clip-border .al-t-clip-x .al-t-25
.al-clip-border .al-t-clip-x .al-extend-t-75 .al-t-40
Copy
.al-clip-border .al-t-clip-x
.al-clip-border .al-e-clip-y
.al-clip-border .al-b-clip-x
.al-clip-border .al-s-clip-y
.al-clip-border .al-all-clip
.al-clip-border .al-all-clip .al-corner-all
.al-clip-border .al-t-clip-x .al-extend-t-25
.al-clip-border .al-t-clip-x .al-t-25
.al-clip-border .al-t-clip-x .al-extend-t-75 .al-t-40
Clip Center with Inlay
Initialize Center & Inlay using the (.al-clip-inlay) class
Add directional clipping with: .al-t-clip-x, .al-e-clip-y, .al-b-clip-x, .al-s-clip-y, or use .al-clip-all for full clipping on all sides.
.al-clip-inlay .al-t-clip-x
.al-clip-inlay .al-e-clip-y
.al-clip-inlay .al-b-clip-x
.al-clip-inlay .al-s-clip-y
.al-clip-inlay .al-all-clip
.al-clip-inlay .al-all-clip .al-corner-all
Sizing center extend (.al-extend-t-* | .al-extend-e-* | .al-extend-b-* | .al-extend-s-* | al-extend-x-* | al-extend-y-* | al-extend-all-*)
Sizing center depth (.al-t-* | .al-e-* | .al-b-* | .al-s-* | al-x-* | al-y-* | al-all-*)
.al-clip-inlay .al-t-clip-x .al-extend-t-25
.al-clip-inlay .al-t-clip-x .al-t-25
.al-clip-inlay .al-t-clip-x .al-extend-t-75 .al-t-40
Copy
.al-clip-inlay .al-t-clip-x
.al-clip-inlay .al-e-clip-y
.al-clip-inlay .al-b-clip-x
.al-clip-inlay .al-s-clip-y
.al-clip-inlay .al-all-clip
.al-clip-inlay .al-all-clip .al-corner-all
.al-clip-inlay .al-t-clip-x .al-extend-t-25
.al-clip-inlay .al-t-clip-x .al-t-25
.al-clip-inlay .al-t-clip-x .al-extend-t-75 .al-t-40
Clip Center
Initialize Center using the (.al-clip) class
Add directional clipping with: .al-t-clip-x, .al-e-clip-y, .al-b-clip-x, .al-s-clip-y, or use .al-clip-all for full clipping on all sides.
.al-clip .al-t-clip-x
.al-clip .al-e-clip-y
.al-clip .al-b-clip-x
.al-clip .al-s-clip-y
.al-clip .al-all-clip
.al-clip .al-all-clip .al-corner-all
Sizing center extend (.al-extend-t-* | .al-extend-e-* | .al-extend-b-* | .al-extend-s-* | al-extend-x-* | al-extend-y-* | al-extend-all-*)
Sizing center depth (.al-t-* | .al-e-* | .al-b-* | .al-s-* | al-x-* | al-y-* | al-all-*)
.al-clip .al-t-clip-x .al-extend-t-25
.al-clip .al-t-clip-x .al-t-25
.al-clip .al-t-clip-x .al-extend-t-75 .al-t-40
Position center (.al-center-t-* | .al-center-e-* | .al-center-b-* | .al-center-s-* | al-center-all-*)
.al-clip .al-t-clip-x .al-center-t-0
.al-clip .al-t-clip-x .al-center-10
.al-clip .al-t-clip-x .al-center-t-25
.al-clip .al-t-clip-x .al-center-t-75
.al-clip .al-t-clip-x .al-center-t-90
.al-clip .al-t-clip-x .al-center-t-100
Copy
.al-clip .al-t-clip-x
.al-clip .al-e-clip-y
.al-clip .al-b-clip-x
.al-clip .al-s-clip-y
.al-clip .al-all-clip
.al-clip .al-all-clip .al-corner-all
.al-clip .al-t-clip-x .al-extend-t-25
.al-clip .al-t-clip-x .al-t-25
.al-clip .al-t-clip-x .al-extend-t-75 .al-t-40
.al-clip .al-t-clip-x .al-center-t-0
.al-clip .al-t-clip-x .al-center-10
.al-clip .al-t-clip-x .al-center-t-25
.al-clip .al-t-clip-x .al-center-t-75
.al-clip .al-t-clip-x .al-center-t-90
.al-clip .al-t-clip-x .al-center-t-100
Clip Corner with Border & Inlay
Initialize Corner, Border, & Inlay using the (.al-corner & .al-both) class
Add clip corner with (.al-ts | .al-te | .al-be | .al-bs) , or use .al-corner-all for full clipping on all corners.
.al-corner .al-both .al-ts
.al-corner .al-both .al-ts .al-te
.al-corner .al-both .al-corner-all
Border & Inlay Sizing (.al-border-* | .al-inlay-all-*)
.al-corner .al-both .al-corner-all .al-border-2 .al-inlay-all-2
.al-corner .al-both al-corner-all .al-border-5 .al-inlay-all-5
.al-corner .al-both .al-corner-all .al-border-10 .al-inlay-all-10
Border & Inlay Colors (.al-border-* | .al-inlay-bg-*)
.al-corner .al-both .al-corner-all .al-border-primary .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-secondary .al-inlay-bg-secondary
.al-corner .al-both .al-corner-all .al-border-success .al-inlay-bg-success
.al-corner .al-both .al-corner-all .al-border-warning .al-inlay-bg-warning
.al-corner .al-both .al-corner-all .al-border-danger .al-inlay-bg-danger
.al-corner .al-both .al-corner-all .al-border-info .al-inlay-bg-info
.al-corner .al-both .al-corner-all .al-border-black .al-inlay-bg-black
.al-corner .al-both .al-corner-all .al-border-white .al-inlay-bg-white
Copy
.al-corner .al-both .al-ts
.al-corner .al-both .al-ts .al-te
.al-corner .al-both .al-corner-all
.al-corner .al-both .al-corner-all .al-border-2 .al-inlay-all-2
.al-corner .al-both al-corner-all .al-border-5 .al-inlay-all-5
.al-corner .al-both .al-corner-all .al-border-10 .al-inlay-all-10
.al-corner .al-both .al-corner-all .al-border-primary .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-secondary .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-success .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-warning .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-danger .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-info .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-black .al-inlay-bg-primary
.al-corner .al-both .al-corner-all .al-border-white .al-inlay-bg-primary
Clip Corner with Border
Initialize Corner & Border using the (.al-corner & .al-border) class
Add clip corner with (.al-ts | .al-te | .al-be | .al-bs) , or use .al-corner-all for full clipping on all corners.
.al-corner .al-border .al-ts
.al-corner .al-border .al-ts .al-te
.al-corner .al-border .al-corner-all
Border Sizing (.al-border-*)
.al-corner .al-border .al-corner-all .al-border-2
.al-corner .al-border al-corner-all .al-border-5
.al-corner .al-border .al-corner-all .al-border-10
Border Colors (.al-border-*)
.al-corner .al-border .al-corner-all .al-border-primary
.al-corner .al-border .al-corner-all .al-border-secondary
.al-corner .al-border .al-corner-all .al-border-success
.al-corner .al-border .al-corner-all .al-border-warning
.al-corner .al-border .al-corner-all .al-border-danger
.al-corner .al-border .al-corner-all .al-border-info
.al-corner .al-border .al-corner-all .al-border-black
.al-corner .al-border .al-corner-all .al-border-white
Copy
.al-corner .al-border .al-ts
.al-corner .al-border .al-ts .al-te
.al-corner .al-border .al-corner-all
.al-corner .al-border .al-corner-all .al-border-2
.al-corner .al-border al-corner-all .al-border-5
.al-corner .al-border .al-corner-all .al-border-10
.al-corner .al-border .al-corner-all .al-border-primary
.al-corner .al-border .al-corner-all .al-border-secondary
.al-corner .al-border .al-corner-all .al-border-success
.al-corner .al-border .al-corner-all .al-border-warning
.al-corner .al-border .al-corner-all .al-border-danger
.al-corner .al-border .al-corner-all .al-border-info
.al-corner .al-border .al-corner-all .al-border-black
.al-corner .al-border .al-corner-all .al-border-white
Clip Corner with Inlay
Initialize Corner & Inlay using the (.al-corner & .al-inlay) class
Add clip corner with (.al-ts | .al-te | .al-be | .al-bs) , or use .al-corner-all for full clipping on all corners.
.al-corner .al-inlay .al-ts
.al-corner .al-inlay .al-ts .al-te
.al-corner .al-inlay .al-corner-all
Inlay Sizing (.al-inlay-all-*)
.al-corner .al-inlay .al-corner-all .al-inlay-all-2
.al-corner .al-inlay al-corner-all .al-inlay-all-5
.al-corner .al-inlay .al-corner-all .al-inlay-all-10
Inlay Colors (.al-inlay-bg-*)
.al-corner .al-inlay .al-corner-all .al-inlay-bg-primary
.al-corner .al-inlay .al-corner-all .al-inlay-bg-secondary
.al-corner .al-inlay .al-corner-all .al-inlay-bg-success
.al-corner .al-inlay .al-corner-all .al-inlay-bg-warning
.al-corner .al-inlay .al-corner-all .al-inlay-bg-danger
.al-corner .al-inlay .al-corner-all .al-inlay-bg-info
.al-corner .al-inlay .al-corner-all .al-inlay-bg-black
.al-corner .al-inlay .al-corner-all .al-inlay-bg-white
Copy
.al-corner .al-inlay .al-ts
.al-corner .al-inlay .al-ts .al-te
.al-corner .al-inlay .al-corner-all
.al-corner .al-inlay .al-corner-all .al-border-2 .al-inlay-all-2
.al-corner .al-inlay al-corner-all .al-border-5 .al-inlay-all-5
.al-corner .al-inlay .al-corner-all .al-border-10 .al-inlay-all-10
.al-corner .al-inlay .al-corner-all .al-inlay-bg-primary
.al-corner .al-inlay .al-corner-all .al-inlay-bg-secondary
.al-corner .al-inlay .al-corner-all .al-inlay-bg-success
.al-corner .al-inlay .al-corner-all .al-inlay-bg-warning
.al-corner .al-inlay .al-corner-all .al-inlay-bg-danger
.al-corner .al-inlay .al-corner-all .al-inlay-bg-info
.al-corner .al-inlay .al-corner-all .al-inlay-bg-black
.al-corner .al-inlay .al-corner-all .al-inlay-bg-white
Clip Corner
Initialize Corner using the (.al-corner) class
Add clip corner with (.al-ts | .al-te | .al-be | .al-bs) , or use .al-corner-all for full clipping on all corners.
.al-corner .al-ts
.al-corner .al-te
.al-corner .al-bs
.al-corner .al-be
.al-corner .al-bs .al-be
.al-corner .al-ts .al-te
.al-corner .al-te .al-be
.al-corner .al-ts .al-bs
.al-corner .al-te .al-bs .al-be
.al-corner .al-ts .al-bs .al-be
.al-corner .al-ts .al-te .al-bs
.al-corner .al-ts .al-te .al-be
.al-corner .al-te .al-bs
.al-corner .al-ts .al-be
.al-corner .al-corner-all
Corner Sizing (.al-ts-* | .al-te-* | .al-be-* | .al-bs-* | .al-corner-all-*)
.al-corner .al-ts-30
.al-corner .al-te-30
.al-corner .al-bs-30
.al-corner .al-be-30
.al-corner .al-corner-all-30
Copy
.al-corner .al-ts
.al-corner .al-te
.al-corner .al-bs
.al-corner .al-be
.al-corner .al-bs .al-be
.al-corner .al-ts .al-te
.al-corner .al-te .al-be
.al-corner .al-ts .al-bs
.al-corner .al-te .al-bs .al-be
.al-corner .al-ts .al-bs .al-be
.al-corner .al-ts .al-te .al-bs
.al-corner .al-ts .al-te .al-be
.al-corner .al-te .al-bs
.al-corner .al-ts .al-be
.al-corner .al-corner-all
.al-corner .al-ts-30
.al-corner .al-te-30
.al-corner .al-bs-30
.al-corner .al-be-30
.al-corner .al-corner-all-30
CSS Variables
Alfuix makes clipping and extending your UI even easier with local CSS variables. Just override variables for instant real-time custom colors, spacing, or sizing — while keeping full Sass support for deeper tweaks.
assets/scss/_clip.scss
Copy
Developer Notes
-
These utilities rely heavily on clip-path: polygon() and CSS custom properties.
-
Use .al-clip, .al-clip-border, .al-clip-inlay, or .al-clip-both 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.
-
RTL support is handled using [dir="rtl"] to switch start/end direction variables.
-
Always pair clip styles with a fallback (e.g., border-radius, overflow: hidden) for compatibility.