04b · Cut corners

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