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

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

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

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

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

Button Pattern

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

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