corner-diagonals

Name: corner-diagonals
Author: mengto

github.com/mengto设计与 UI7.1k1.5k 次安装3 天前更新

代码仓库

关于 corner-diagonals

用于为按钮、卡片、面板和容器外壳添加细微斜切边角的设计技能。提供可复用的几何与边框样式，同时兼顾文字、点击区域和焦点状态的可用性。

主要功能

01基于多边形的斜切形状
02可复用的切角尺寸变量
03带边框的外壳样式
04按钮、卡片和面板设计方案
05可读性与焦点状态检查

适用场景

01为按钮设计统一的工程感轮廓
02构建带斜切角的框架卡片
03在多个面板中使用重复几何元素

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mengto/skills --skill corner-diagonals

安装后在 Claude Code 中输入/corner-diagonals确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

demo/

index.html

PROMPT.md

source.json

详细介绍

转角斜切

适用范围

仅用于按钮、卡片、面板和容器外壳。
当界面需要斜切转角或倒角边缘时使用。
即使视觉形状经过裁切，也要确保点击区域清晰易用。
在不同表面复用相同的转角规则，使其看起来像一套系统。

视觉目标

斜切应给人精心设计、锐利且明确的感觉。
切角要细微，并与组件尺寸成比例。
可以对一个或多个角进行倒角，但轮廓仍应一目了然。
将斜角作为重复出现的结构性元素，而不是一次性的技巧。

切角令牌

: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, var(--corner-accent), white 45%);
  outline-offset: 3px;
}

次要按钮

使用较深色的外壳，并采用斜角描边样式。

.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 尺度。
聚焦状态在裁切后的形状周围仍清晰可见。

支持 Markdown

登录后评论