Triangular cutouts, not just radius.
Slice a 45° triangle off opposite corners to echo the hex motif on rectangular surfaces, wells, panels, hero containers, callout cards.
Variants
Top-left + Bottom-right
--clip-cut-tlbr
Default. Diagonal asymmetry. Use 90% of the time.
Top-right + Bottom-left
--clip-cut-trbl
Mirror. Use to balance a tlbr neighbour.
All four corners
--clip-cut-all
Symmetrical. Image wells, badges, dense plates.
Rounded, for comparison
border-radius
Still default for buttons, inputs, content cards.
Cut sizes · scale with the element
--cut-sm · 6px
tags, chips
--cut-md · 10px
buttons, badges
--cut-lg · 16px
cards, panels
--cut-xl · 24px
hero plates
In context
Cut-corner card
A cobalt panel with triangles cut from top-left and bottom-right. The light background shows through, the visual echo of the hex motif on a rectangle.
--cut: 28px · clip: tlbr
Image well · category face
--cut: 18px · clip: all
Solution
WOO compliance, by Friday.
Three apps. Twenty minutes of setup. A working portal at your Nextcloud-hosted domain.
--cut: 32px · clip: tlbr · hero plate
Buttons with cut corners read as branded, but stay rectilinear and clickable.
--cut: 8px · clip: tlbr
How to use
.panel {
clip-path: var(--clip-cut-tlbr-md); /* top-left + bottom-right, 10px cut */
background: var(--c-blue-cobalt);
padding: 32px;
}
/* Direction */
clip-path: var(--clip-cut-tlbr-md); /* default, diagonal asymmetry */
clip-path: var(--clip-cut-trbl-md); /* mirror */
clip-path: var(--clip-cut-all-md); /* all four corners, image wells */
/* Size, pair the same direction with -sm | -md | -lg | -xl
sm: 6px (buttons, badges) · md: 10px (cards)
lg: 16px (panels, image wells) · xl: 24px (hero plates) */
Rules
Do
- Use on hero plates, callout panels, image wells, solution badges
- Match cut size to element scale (sm/md/lg/xl)
- Default to tlbr, it has the most movement
- Keep buttons mostly rounded; cut corners are accent treatment
- Combine with a contrasting background to make cuts visible
Don't
- Mix cut corners and rounded corners on the same element
- Cut input fields or text areas, keep typing surfaces calm
- Use cut-all on text-heavy cards (the cuts eat content)
- Cut more than ~25% of the element's shorter side
- Combine cut corners with the hex shape on the same surface, pick one motif