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.

Quality

100%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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.

Repository: MengTo/Skills
Path: agent-skills/web-design/corner-diagonals/SKILL.md
Commit: 46abf78

Last updated: about 6 hours ago
First committed: 3 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.