Shape Class

This class clips your element into an octagonal shape.
The implementation for this class comes from CSS Tricks.

Variables

Name	Description	Default
--shape-size	Width of the element
--shape-aspect	Aspect ratio of the element (width / height)	1
--shape-horizontal-clip	Horizontal clipping distance (number between 0-0.5)
--shape-vertical-clip	Vertical clipping distance (number between 0-0.5)

The image below shows how the various variables influence the clipped path.
Image adapted from CSS Tricks.

CSS

/* Base Styling */
.shape {
    width: var(--shape-size);
    aspect-ratio: var(--shape-aspect, 1);
    clip-path: polygon(
        var(--shape-horizontal-clip) 0,
        calc(100% - var(--shape-horizontal-clip)) 0,
        100% var(--shape-vertical-clip),
        100% calc(100% - var(--shape-vertical-clip)),
        calc(100% - var(--shape-horizontal-clip)) 100%,
        var(--shape-horizontal-clip) 100%,
        0 calc(100% - var(--shape-vertical-clip)),
        0 var(--shape-vertical-clip)
    );
}