用途:为按钮、卡片、面板和容器外壳应用斜切角与倒角边缘,适用于需要精确几何框架或科幻风格 UI 的界面。
主要能力:提供斜切角设计令牌(如 --corner-cut-sm: 8px、--corner-cut-md: 14px、--corner-cut-lg: 24px 等),以及多种核心形状类,如 .cut-all(四角斜切)、.cut-top-left-bottom-right、.cut-top-right-bottom-left,通过 clip-path: polygon(...) 实现真实斜切轮廓。还包含带边框外壳模式 .cut-shell 与 .cut-shell__inner、按钮模式 .cut-button、次要按钮 .cut-button-secondary。
使用方式:在 :root 中定义角切令牌,为元素添加对应形状类;按钮设置最小高度 44px,悬停时用 filter: brightness(1.08),聚焦时用 outline 与 outline-offset。
适用场景:主按钮采用统一切角的斜切或倒角矩形;卡片和面板使用带细微边框、一两个斜切角的容器;大区块使用斜切角内块嵌套在直角外框中形成层级;可镜像搭配左上配右下或右上配左下。
限制与注意事项:斜切尺寸小控件建议 6px-10px、卡片 12px-18px、大面板 20px-32px;避免同类组件随机使用不同切角尺寸、过度裁剪影响可读性、将圆角药丸与倒角几何混用而无清晰层级、只裁剪背景而边框和点击区域仍为矩形、每个斜面都填充高亮色。边框、背景和点击区域应遵循同一斜切几何,文字保留舒适水平内边距,重复组件使用相同 --cut 比例,聚焦状态在裁剪形状周围保持可见。具体平台、收费或效果数据暂未提供。