SHAPE STUDY · 024
让缺口承接真实动作
这是一个普通 DOM。改变宽度、背景或内容，边框和内凹轮廓仍沿着同一套参数响应。
RESPONSIVE CSS SHAPE()G1 CONTINUITY
CSS 工具 · 四角内凹轮廓生成器
INVERTED CORNER GENERATOR内凹圆角生成器
拖动控制点，精调半径与张力，生成响应式 border-shape。四角可独立启停，外圆角仍使用像素半径。
DOM 实时预览拖动控制点 · 右侧精确输入
SVG导入已有 SVG 轮廓
PATH → SHAPE()自动提取 viewBox 与 path d，再换算为响应式轮廓
展开转换器
SVG
展开转换器导入已有 SVG 轮廓
PATH → SHAPE()自动提取 viewBox 与 path d，再换算为响应式轮廓
粘贴完整 SVG 时会自动读取 viewBox，并提取其中的 path d。支持 M、L、H、V、C、S、Q、T、Z；输出使用百分比坐标。
shape() 输出
shape(
from 8.89% 0%,
line to 48.89% 0%,
curve to 57.78% 16% with 53.89% 0% / 57.78% 7%,
line to 57.78% 18%,
curve to 68.89% 38% with 57.78% 29% / 62.78% 38%,
line to 71.11% 38%,
curve to 82.22% 18% with 77.22% 38% / 82.22% 29%,
line to 82.22% 16%,
curve to 91.11% 0% with 82.22% 7% / 86.11% 0%,
curve to 100% 16% with 96.11% 0% / 100% 7%,
line to 100% 84%,
curve to 91.11% 100% with 100% 93% / 96.11% 100%,
line to 8.89% 100%,
curve to 0% 84% with 3.89% 100% / 0% 93%,
line to 0% 16%,
curve to 8.89% 0% with 0% 7% / 3.89% 0%,
close
)使用方法
先确定要改变哪一段边界
先选位置和组合，再确定负空间的大小。圆角与张力负责把直线自然接回轮廓；内容关系是后续选择，不是使用缺口的前提。
- 01
选择边界位置
先决定改变一个角、对角还是四个角。缺口可以只是形状语言，也可以在后续承接按钮、头像或状态。
- 02
确定负空间尺度
宽度和高度决定缺口占据多少边界。先观察卡片整体比重；只有缺口需要放内容时，再检查安全区。
- 03
修圆角和曲线张力
外圆角负责接回卡片轮廓，内凹圆角决定缺口怎样转弯；曲线张力用来细调转弯的饱满程度。
- 04
复制到普通 DOM
展开 shape() 输出并复制 CSS，把它加到现有元素上。需要适配不同宽度时，继续使用百分比坐标和同一条 border-shape。