如何实现如图所示的左侧倒圆角边框？

核心思路是通过调整伪元素的定位和径向渐变遮罩的圆心位置，来实现左侧的倒圆角效果，具体调整步骤如下：

关键参数调整说明 #

• 定位修改：将伪元素从容器右侧移到左侧，把right: 0改为left: 0
• 遮罩圆心调整：径向渐变的圆心从at 0 0（伪元素左上角）改为at 100% 0（伪元素右上角），这样遮罩会挖掉伪元素的右上角区域，配合box-shadow形成左侧的倒圆角
• 修正渐变范围：原代码中transparent 20px是错误的，因为圆的半径是10px，应该让透明区域覆盖到10px，之后用黑色填充，确保遮罩生效

完整代码示例 #

首先确保容器设置相对定位：

.inverted-border-radius {
  position: relative;
  /* 你的容器其他样式，比如背景、内边距等 */
}

保留右侧倒圆角的同时，新增左侧倒圆角的伪元素：

/* 右侧倒圆角（原代码优化） */
.inverted-border-radius::before {
  content: "";
  position: absolute;
  bottom: 38px;
  right: 0;
  width: 20px;
  height: 20px;
  background: #d6dcea;
  -webkit-mask-image: radial-gradient(
    circle 10px at 0 0,
    transparent 0,
    transparent 10px,
    black 10.1px
  );
  mask-image: radial-gradient(
    circle 10px at 0 0,
    transparent 0,
    transparent 10px,
    black 10.1px
  );
  box-shadow: 0 -25px 0 0 #f66969;
}

/* 左侧倒圆角（新增） */
.inverted-border-radius::after {
  content: "";
  position: absolute;
  bottom: 38px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #d6dcea;
  -webkit-mask-image: radial-gradient(
    circle 10px at 100% 0,
    transparent 0,
    transparent 10px,
    black 10.1px
  );
  mask-image: radial-gradient(
    circle 10px at 100% 0,
    transparent 0,
    transparent 10px,
    black 10.1px
  );
  box-shadow: 0 -25px 0 0 #f66969;
}

如果只需要左侧倒圆角，直接修改原伪元素的参数即可：

.inverted-border-radius::before {
  content: "";
  position: absolute;
  bottom: 38px;
  left: 0; /* 移到左侧 */
  width: 20px;
  height: 20px;
  background: #d6dcea;
  -webkit-mask-image: radial-gradient(
    circle 10px at 100% 0, /* 圆心改为伪元素右上角 */
    transparent 0,
    transparent 10px,
    black 10.1px
  );
  mask-image: radial-gradient(
    circle 10px at 100% 0,
    transparent 0,
    transparent 10px,
    black 10.1px
  );
  box-shadow: 0 -25px 0 0 #f66969;
}

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