如何复刻Figma中承载媒体的带圆角切角矩形异形？

针对你需要在承载视频/图片的矩形上制作自定义切角（同时保留圆角）的需求，推荐两种无需拼接元素的纯CSS方案：

方案一：使用CSS clip-path 自定义路径 #

直接通过clip-path的path()函数定义包含圆角和切角的完整路径，容器内的媒体内容会自动适配这个形状：

/* 媒体容器 */
.media-container {
  width: 400px; /* 根据实际需求调整尺寸 */
  height: 300px;
  overflow: hidden;
  /* 用SVG路径语法定义形状：圆角20px，上下左右各有60px长的凹切 */
  clip-path: path('M20,20 L380,20 C391.045695,20 400,28.954305 400,40 L400,260 C400,271.045695 391.045695,280 380,280 L20,280 C8.954305,280 0,271.045695 0,260 L0,40 C0,28.954305 8.954305,20 20,20 Z M60,20 L60,60 M340,20 L340,60 M60,280 L60,240 M340,280 L340,240');
}

/* 媒体内容样式 */
.media-container img,
.media-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证媒体内容铺满容器 */
}

快速复刻Figma设计的技巧 #

在Figma中选中目标形状，右键选择复制SVG，提取代码中<path>标签的d属性值，直接替换到上述CSS的clip-path: path('')中即可完美匹配设计。

方案二：使用CSS遮罩（Mask） #

如果需要更好的浏览器兼容性，或者形状更复杂，可以用SVG作为遮罩：

.media-container {
  width: 400px;
  height: 300px;
  /* 内联SVG作为遮罩，路径同样可从Figma导出 */
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path d="M20,20 L380,20 C391.045695,20 400,28.954305 400,40 L400,260 C400,271.045695 391.045695,280 380,280 L20,280 C8.954305,280 0,271.045695 0,260 L0,40 C0,28.954305 8.954305,20 20,20 Z M60,20 L60,60 M340,20 L340,60 M60,280 L60,240 M340,280 L340,240" fill="white"/></svg>');
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.media-container img,
.media-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

为什么绝对定位叠加不可行？ #

这种方式会用额外元素覆盖容器，不仅会遮挡媒体内容的交互（比如视频播放控件），还无法让容器本身的圆角与切角自然融合，而上述两种方案都是直接对容器进行形状裁剪/遮罩，内容会完全适配容器形状，没有遮挡问题。

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