Border Shapes
This Shapes Utilities provide custom visual shapes such as triangles, trapezoids, and fancy rounded corners using pure CSS. These classes extend Bootstrap's with flexible geometric designs for visual accents and layout enhancements.
All classes use the al- prefix and follow utility-first conventions.
Overview
| Utility Class | Description |
|---|---|
| .al-triangle-{dir}-{val} | Triangle shape in a specified direction with size (e.g. t, b, ts, te, bs, be, s, e). |
| .al-trapezoid-{dir}-{val} | Trapezoid in t, b, s, or e direction with customizable sizes. |
| .al-trapezoid-w-* | Set trapezoid width in px or % (e.g. w-50, w-25). |
| .al-trapezoid-h-* | Set trapezoid height in px or % (e.g. h-48, h-75). |
| .al-rounded-fancy-* | Apply decorative border-radius styles. |
Sass Reference
assets/scss/_border-shapes.scss
Copy
Class Usage Reference
| Class | Output |
|---|---|
| .al-triangle-t-10 | Triangle pointing down |
| .al-triangle-b-16 | Triangle pointing up |
| .al-triangle-te-16 | Top-end triangle |
| .al-triangle-bs-12 | Bottom-start triangle |
| .al-trapezoid-t-32 | Trapezoid with top side |
| .al-trapezoid-w-50 | 50% trapezoid width |
| .al-trapezoid-h-24 | Trapezoid height of 24px |
| .al-rounded-fancy-1 | Irregular ellipse radius |
Examples
Triangle
Triangle ts
Triangle te
Triangle bs
Triangle be
Triangle t
Triangle s
Triangle b
Triangle e
Size
2px
16px
32px
64px
Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
Trapezoid
Trapezoid t
Trapezoid b
Trapezoid s
Trapezoid e
Size
2px
16px
32px
64px
Width
25%
50%
75%
100%
32px
48px
64px
112px
Height
32px
48px
64px
112px
Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Copy
Trapezoid t
Trapezoid b
Trapezoid s
Trapezoid e
// Size
2px
16px
32px
64px
// Width
25%
50%
75%
100%
32px
48px
64px
112px
// Height
32px
48px
64px
112px
// Colors
Primary
Secondary
Success
Warning
Danger
Info
Black
White
Fancy Border Radius
.al-rounded-fancy
.al-rounded-fancy-2
.al-rounded-fancy-3
.al-rounded-fancy-4
Copy
.al-rounded-fancy
.al-rounded-fancy-2
.al-rounded-fancy-3
.al-rounded-fancy-4
Developer Notes
-
Triangle directions include: t, b, ts, te, bs, be, s, e.
-
Trapezoid shapes use t, b, s, e for placement, and support pixel & percentage dimensions.
-
RTL support is built-in for directional classes (ts, te, bs, be).
-
Fancy rounded shapes provide decorative ellipse-style border radius.