Corner Diagonals

Implement precise chamfered edges and diagonal-cut corners for buttons and containers using CSS clip-path and polygon shapes.

Views

Uses

Updated

May 4, 2026

Author

MengTo

Skill creator

Source

MengTo/Skills

Added by Meng To

ui-design visual-design layout components buttons cards css best-practices

Property	Value
name	corner-diagonals
description	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.
keywords	ui-design, visual-design, layout, components, buttons, cards, css, best-practices

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

: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.

.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.

.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;
}

<section class="cut-shell">
  <div class="cut-shell__inner">
    ...
  </div>
</section>

Button Pattern

.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.

.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.