如何在CSS中实现形状相减？制作左上直角的特殊圆角容器

你的需求是将容器左上角改为直角，同时保留borderRadius: '150px 30px 30px 30px'中其余三个角的圆角效果，之前的伪元素旋转方法易错位且复杂，推荐两种更可靠的实现方式：

方法1：使用CSS clip-path 裁剪 #

clip-path可直接定义容器可视区域，精准实现左上角直角，同时保留边框、阴影效果：

<Box sx={{
  position: 'relative',
  width: '360px',
  height: '506px',
  border: `3px solid ${palette.black[900]}`,
  borderRadius: '150px 30px 30px 30px',
  backgroundColor: '#D9D9D9',
  // 裁剪出左上角直角的形状
  clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 150px, 150px 0)',
  // 单独用伪元素渲染阴影（clip-path会裁剪原生阴影）
  '&::after': {
    content: '""',
    position: 'absolute',
    inset: -3, // 匹配边框宽度
    borderRadius: '150px 30px 30px 30px',
    boxShadow: `10px 10px 0px ${palette.black[900]}`,
    zIndex: -1,
    clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 150px, 150px 0)',
  }
}}/>

说明 #

• clipPath参数通过坐标定义了左上角直角的多边形区域，完全贴合原圆角半径的尺寸；
• 由于clip-path会同时裁剪原生box-shadow，因此用::after伪元素单独渲染阴影并做相同裁剪，放在容器下方实现完整阴影效果。

方法2：用伪元素精准覆盖左上角圆角 #

如果不想使用clip-path，可以用与容器背景色一致的伪元素覆盖圆角区域：

<Box sx={{
  position: 'relative',
  width: '360px',
  height: '506px',
  border: `3px solid ${palette.black[900]}`,
  borderRadius: '150px 30px 30px 30px',
  boxShadow: `10px 10px 0px ${palette.black[900]}`,
  backgroundColor: '#D9D9D9',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: -3, // 对齐边框顶部
    left: -3, // 对齐边框左侧
    width: 150, // 对应原左上圆角半径
    height: 150, // 对应原左上圆角半径
    backgroundColor: '#D9D9D9', // 与容器背景色一致
    borderLeft: `3px solid ${palette.black[900]}`,
    borderTop: `3px solid ${palette.black[900]}`,
    zIndex: 1,
  }
}}/>

说明 #

• 伪元素尺寸与原左上圆角半径一致，位置对齐容器边框左上角，添加左侧和顶部边框后，可完全覆盖原圆角区域，形成直角效果；
• 若容器内有内容，需调整内容的z-index高于伪元素，避免被遮挡。

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