Deft
Ask AI

Search

Search skills, authors and topics

MengTo / Skills

corner-diagonals

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.

View sourceVisualCraft

Install

npx skills add https://github.com/MengTo/Skills --skill corner-diagonals

Corner Diagonals

Scope

  • Apply only to buttons, cards, panels, and container shells.
  • Use when surfaces need diagonal-cut corners or chamfered edges.
  • Keep the hit area readable and usable even when the visual shape is clipped.
  • Reuse the same corner logic across surfaces so it feels like a system.

Visual Target

  • Diagonal cuts should feel engineered, sharp, and intentional.
  • Cuts stay subtle and proportional to the component size.
  • One or more corners can be chamfered, but the silhouette should still read quickly.
  • Use diagonal corners as a repeated structural motif, not a one-off trick.

Cut Tokens

css
:root {  --corner-cut-sm: 8px;  --corner-cut-md: 14px;  --corner-cut-lg: 24px;  --corner-line: rgba(255, 255, 255, 0.18);  --corner-line-strong: rgba(255, 255, 255, 0.34);  --corner-fill: rgba(10, 14, 24, 0.82);  --corner-accent: #8b5cf6;}

Core Shapes

Use clip-path: polygon(...) for true diagonal silhouettes.

css
.cut-all {  --cut: var(--corner-cut-md);  clip-path: polygon(    var(--cut) 0,    calc(100% - var(--cut)) 0,    100% var(--cut),    100% calc(100% - var(--cut)),    calc(100% - var(--cut)) 100%,    var(--cut) 100%,    0 calc(100% - var(--cut)),    0 var(--cut)  );}
.cut-top-left-bottom-right {  --cut: var(--corner-cut-md);  clip-path: polygon(    var(--cut) 0,    100% 0,    100% calc(100% - var(--cut)),    calc(100% - var(--cut)) 100%,    0 100%,    0 var(--cut)  );}
.cut-top-right-bottom-left {  --cut: var(--corner-cut-md);  clip-path: polygon(    0 0,    calc(100% - var(--cut)) 0,    100% var(--cut),    100% 100%,    var(--cut) 100%,    0 100%,    0 0  );}

Bordered Shell

For bordered surfaces, use an outer wrapper and inner surface with the same polygon.

css
.cut-shell {  --cut: var(--corner-cut-md);  --border-size: 1px;  position: relative;  padding: var(--border-size);  background: linear-gradient(135deg, var(--corner-line-strong), transparent 46%, var(--corner-line));  clip-path: polygon(    var(--cut) 0,    100% 0,    100% calc(100% - var(--cut)),    calc(100% - var(--cut)) 100%,    0 100%,    0 var(--cut)  );}
.cut-shell__inner {  min-height: 100%;  padding: clamp(16px, 2.4vw, 28px);  background: var(--corner-fill);  clip-path: inherit;}
html
<section class="cut-shell">  <div class="cut-shell__inner">    ...  </div></section>

Button Pattern

css
.cut-button {  --cut: var(--corner-cut-sm);  position: relative;  display: inline-flex;  min-height: 44px;  align-items: center;  justify-content: center;  gap: 8px;  padding: 0 18px;  border: 0;  color: white;  background: linear-gradient(135deg, var(--corner-accent), color-mix(in srgb, var(--corner-accent), black 28%));  clip-path: polygon(    var(--cut) 0,    100% 0,    100% calc(100% - var(--cut)),    calc(100% - var(--cut)) 100%,    0 100%,    0 var(--cut)  );}
.cut-button:hover {  filter: brightness(1.08);}
.cut-button:focus-visible {  outline: 2px solid color-mix(in srgb, var(--corner-accent), white 45%);  outline-offset: 3px;}

Secondary Button

Use a darker shell with diagonal outline treatment.

css
.cut-button-secondary {  --cut: var(--corner-cut-sm);  color: white;  background:    linear-gradient(var(--corner-fill), var(--corner-fill)) padding-box,    linear-gradient(135deg, var(--corner-line-strong), transparent 58%, var(--corner-accent)) border-box;  border: 1px solid transparent;  clip-path: polygon(    var(--cut) 0,    100% 0,    100% calc(100% - var(--cut)),    calc(100% - var(--cut)) 100%,    0 100%,    0 var(--cut)  );}

Recommended Patterns

  • Primary buttons: clipped hex-like or chamfered rectangles with one consistent cut amount.
  • Secondary buttons: dark shells with diagonal outline treatment and restrained hover fill.
  • Cards and panels: thin framed containers with one or two diagonal corners.
  • Large sections: diagonal-corner inner blocks nested inside straight outer frames for hierarchy.
  • Mirrored pairings: top-left plus bottom-right, or top-right plus bottom-left.

Tuning Knobs

  • Cut size: 6px-10px for small controls, 12px-18px for cards, 20px-32px for large panels.
  • Border treatment: use a thin stroke, gradient shell, or inset line to make the silhouette legible.
  • Consistency: reuse the same polygon family across buttons and containers.
  • Accent: reserve bright color for primary controls, hover borders, or focal states.
  • Motion: brighten fills, reveal borders, or slide overlays; keep the shape stable.

Avoid

  • Random cut sizes across similar components.
  • Aggressive clipping that harms readability or makes the component feel broken.
  • Mixing rounded pills and chamfered geometry without clear hierarchy.
  • Clipping only the background while borders and hit areas stay rectangular.
  • Flooding every diagonal surface with a bright accent color.

Quick Checks

  • Border, background, and hit area follow the same diagonal geometry.
  • Text still has comfortable horizontal padding after the cut.
  • Buttons keep at least 44px height for touch targets.
  • Repeated components use the same --cut scale.
  • Focus states remain visible around the clipped shape.