corner-diagonals

name	corner-diagonals
description	给按钮、卡片、面板和容器外壳应用斜切角与倒角边。当设计需要精确的几何框架、科幻感 UI 面板、切角控件，或工程感的锐利容器，而非圆角药丸或普通矩形时使用。

Corner Diagonals

适用范围

• 只应用于按钮、卡片、面板和容器外壳。
• 当面板需要斜切角或倒角边时使用。
• 即便视觉形状被裁切，也要让点击区域保持可读、可用。
• 在各面板间复用相同的切角逻辑，让它感觉像一套系统。

视觉目标

• 斜切应显得工程化、锐利、有意图。
• 切角保持微妙，并与组件尺寸成比例。
• 可倒一个或多个角，但轮廓仍应能被迅速识别。
• 把斜切角当作重复的结构母题，而非一次性的花招。

切角令牌

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

核心形状

用 clip-path: polygon(...) 实现真正的斜切轮廓。

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

带边框外壳

对于带边框的面板，使用外层包裹器和内层面板套用相同的多边形。

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

按钮模式

.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, (--corner-accent), white );
  : ;
}

次级按钮

使用更深的外壳，配以斜切轮廓处理。

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

推荐模式

• 主按钮：切角的类六边形或倒角矩形，切角量保持一致。
• 次级按钮：深色外壳，配斜切轮廓处理和克制的悬停填充。
• 卡片和面板：带一到两个斜切角的细框容器。
• 大区块：把斜切角内块嵌套进平直的外框里以形成层级。
• 镜像配对：左上加右下，或右上加左下。

调节旋钮

• 切角大小：小控件 6px-10px，卡片 12px-18px，大面板 20px-32px。
• 边框处理：用细描边、渐变外壳或内嵌线让轮廓清晰可读。
• 一致性：在按钮和容器间复用同一族多边形。
• 强调色：把明亮色保留给主控件、悬停边框或焦点态。
• 动效：提亮填充、显现边框或滑入叠层；保持形状稳定。

应避免

• 相似组件间使用随机的切角大小。
• 损害可读性或让组件显得破损的激进裁切。
• 在没有清晰层级的情况下混用圆角药丸和倒角几何。
• 只裁切背景，而边框和点击区域仍为矩形。
• 让每个斜切面板都铺满明亮的强调色。

快速检查

• 边框、背景和点击区域遵循相同的斜切几何。
• 切角后文字仍有舒适的水平内边距。
• 按钮为触摸目标保持至少 44px 高度。
• 重复组件使用相同的 --cut 尺度。
• 焦点态在被裁切的形状周围仍然可见。