如何用CSS实现矩形侧边中间的Inverted border-radius（内凹圆角）？

完全可以用CSS实现这种侧边中间的内凹圆角效果，下面提供几种实用的实现方案：

方法一：径向渐变+伪元素补边 #

通过径向渐变在侧边中心创建透明内凹区域，再用伪元素补全内凹处的边框，模拟内凹效果。

.inverted-box {
  width: 300px;
  height: 200px;
  background: #fff;
  /* 左侧中间内凹，20px为内凹半径 */
  background-image: radial-gradient(circle at left center, transparent 20px, #fff 20px);
  border: 2px solid #333;
  border-left: none;
  position: relative;
}
/* 补全左侧内凹处的边框 */
.inverted-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 20px);
  width: 2px;
  height: 40px;
  background: #333;
  border-radius: 0 2px 2px 0;
}

调整代码中的20px参数可改变内凹的大小；若需要右侧也实现内凹，复制一份径向渐变并将left center改为right center，同时对应补充右侧边框的伪元素即可。

方法二：伪元素叠加模拟内凹 #

利用上下两个伪元素覆盖矩形侧边的上下区域，中间露出的背景形成内凹效果，伪元素的圆角配合背景色实现内凹圆角。

.inverted-box {
  width: 300px;
  height: 200px;
  background: #333;
  position: relative;
  overflow: hidden;
}
.inverted-box::before,
.inverted-box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: calc(50% - 20px);
  background: #fff;
}
.inverted-box::before {
  top: 0;
  border-radius: 0 0 0 20px;
}
.inverted-box::after {
  bottom: 0;
  border-radius: 0 20px 0 0;
}

父元素的深色背景在中间露出，配合伪元素的圆角形成内凹；若要实现右侧内凹，只需调整伪元素的border-radius方向为右侧圆角即可。

方法三：clip-path路径裁剪 #

直接使用CSS的clip-path属性绘制带有内凹的多边形路径，精准定义矩形的形状。

.inverted-box {
  width: 300px;
  height: 200px;
  background: #fff;
  border: 2px solid #333;
  /* 左侧中间内凹，20px为内凹半径，内凹高度为40px */
  clip-path: polygon(
    20px 0, 
    100% 0, 
    100% 100%, 
    20px 100%, 
    0 calc(50% + 20px), 
    0 calc(50% - 20px)
  );
}

通过调整路径中的20px和calc(50% ±20px)参数，可灵活改变内凹的大小和高度；若需要右侧内凹，修改路径的左侧顶点参数为右侧对应位置即可。

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