如何通过CSS的border-radius与clip-path实现自定义矩形？

针对你想要复刻自定义矩形的需求，以下是几种高效的CSS实现技巧，包括border-radius与clip-path的结合用法：

1. 组合border-radius和clip-path实现复合形状 #

如果你的目标形状是圆角与切角/特殊折线的组合，可以通过这两个属性配合实现。比如假设形状是左上角、右下角为圆角，右上角、左下角为小切角：

.custom-rect {
  width: 320px;
  height: 220px;
  /* 先设置基础圆角 */
  border-radius: 24px 0 24px 0;
  /* 用clip-path裁剪出需要的切角，覆盖冲突区域 */
  clip-path: polygon(
    0 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 0
  );
  background: #2563eb;
}

注意：clip-path会优先裁剪元素，所以要调整两者的参数，让圆角和裁剪区域互补，避免圆角被裁剪掉。

2. 伪元素叠加实现复杂曲线/凹陷 #

如果形状包含不规则的凹陷或凸起，用单个元素的属性难以实现时，可借助伪元素叠加：

.custom-rect {
  position: relative;
  width: 320px;
  height: 220px;
  background: #2563eb;
  overflow: hidden;
  /* 基础圆角 */
  border-radius: 16px;
}

/* 右下角添加弧形凹陷 */
.custom-rect::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffffff; /* 与父元素所在背景色一致，形成凹陷 */
}

3. 用clip-path: path()精确复刻任意形状 #

如果目标形状的曲线非常复杂，直接写属性参数难以匹配，你可以用SVG工具（比如Figma、Sketch）导出形状的路径代码，然后用path()类型的clip-path实现：

.custom-rect {
  width: 320px;
  height: 220px;
  /* 替换成你导出的SVG路径 */
  clip-path: path('M24,0 L296,16 L320,196 L16,220 L24,0 Z');
  background: #2563eb;
}

这种方法能1:1还原原始形状，比Canvas更易维护，也不需要JS参与。

内容的提问来源于stack exchange，提问作者Volodya Mikhnov