Predefine Clip

All classes use the al- prefix and follow utility-first conventions.

Hexa

Initialize hexa using the (.al-hexa or .al-hexa-alt) class

.al-hexa
inlay
border
inlay &
border
Copy
.al-hexa-alt
inlay
border
inlay &
border
Copy

Add hexa inlay sizes & color with .al-inlay-all-* & .al-inlay-bg-{color}.

1px,
Primary
2px,
Secondary
3px,
Success
4px,
Warning
8px,
Danger
16px,
Info
24px,
Black
32px,
White

Add hexa inlay color opacity with .al-inlay-bg-{color}-{opacity}.

5
10
25
50
75
100
Copy

Add hexa border size & color with .al-border-* & .al-border-{color}.

1px,
Primary
2px,
Secondary
3px,
Success
4px,
Warning
8px,
Danger
16px,
Info
24px,
Black
32px,
White

Add hexa border opacity with .al-border-{color}-{opacity}.

5
10
25
50
75
100
Copy

Triangle

Initialize triangle using the (.al-triangle-{direction}) class

Copy

Add Triangle direction with .al-triangle-{direction}.

Up
Down
Start
End
Copy

Add Triangle inlay sizes & color with .al-inlay-all-* & al-inlay-bg-{color}.

1px, Primary
2px, Secondary
3px, Success
4px, Warning
8px, Danger
16px, Info
24px, Black
32px, White

Add hexa inlay color opacity with .al-inlay-bg-{color}-{opacity}.

5
10
25
50
75
100
Copy

Add Triangle border size & color with .al-border-* & al-border-{color}.

1px, Primary
2px, Secondary
3px, Success
4px, Warning
8px, Danger
16px, Info
24px, Black
32px, White

Add hexa border opacity with .al-border-{color}-{opacity}.

5
10
25
50
75
100
Copy

Developer Notes

  • These utilities rely heavily on clip-path: polygon() and CSS custom properties.

  • Use .al-hexa, .al-hexa-alt, .al-triangle-{direction} for activating clipping shapes.

  • Adjust --al-* variables to customize inlay size & color: --al-inlay, --al-inlay-bg.

  • Adjust --al-* variables to customize border size & color: --al-border, --al-border-bg.

  • Always pair clip styles with a fallback (e.g., border-radius, overflow: hidden) for compatibility.

On this page

About

Examples

Developer Notes
Cliping
Custom Cliping