.u-clip-bevel-sm {
    clip-path: polygon(var(--shape-card-bevel-sm) 0, 100% 0, 100% calc(100% - var(--shape-card-bevel-sm)), calc(100% - var(--shape-card-bevel-sm)) 100%, 0 100%, 0 var(--shape-card-bevel-sm));
}

.u-clip-bevel-md {
    clip-path: polygon(var(--shape-card-bevel-md) 0, 100% 0, 100% calc(100% - var(--shape-card-bevel-md)), calc(100% - var(--shape-card-bevel-md)) 100%, 0 100%, 0 var(--shape-card-bevel-md));
}

.u-clip-bevel-lg {
    clip-path: polygon(var(--shape-card-bevel-lg) 0, 100% 0, 100% calc(100% - var(--shape-card-bevel-lg)), calc(100% - var(--shape-card-bevel-lg)) 100%, 0 100%, 0 var(--shape-card-bevel-lg));
}

.u-clip-chevron {
    clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 100%);
}

.u-clip-triangle {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}