如何使用CSS实现矩形交点位置的特殊曲线效果

下面是三种常用的实现方式，你可以根据场景选择：

方法1：CSS径向渐变实现（无额外DOM，性能最优） #

不需要新增标签，通过给两个交叉条分别设置对应角的径向渐变，即可做出无缝衔接的内凹曲线：

<div class="cross-shape">
  <div class="h-bar"></div>
  <div class="v-bar"></div>
</div>

.cross-shape {
  position: relative;
  width: 400px;
  height: 400px;
}
/* 水平条 */
.h-bar {
  position: absolute;
  top: 120px;
  left: 0;
  width: 250px;
  height: 120px;
  /* 右下角做半径30px的内凹透明 */
  background: radial-gradient(circle at right bottom, transparent 30px, #2563eb 30px);
}
/* 垂直条 */
.v-bar {
  position: absolute;
  top: 120px;
  left: 250px;
  width: 120px;
  height: 280px;
  /* 左上角做半径30px的内凹透明，和水平条完美衔接 */
  background: radial-gradient(circle at left top, transparent 30px, #2563eb 30px);
}

调整代码里的30px即可修改内凹圆角的大小。

方法2：SVG路径绘制（适配复杂场景，缩放不失真） #

如果形状更复杂、或者需要支持任意缩放，直接用SVG的圆弧命令绘制是最稳妥的方案：

<svg width="400" height="400" viewBox="0 0 400 400" fill="none">
  <path 
    d="M0 120 H250 L250 150 A30 30 0 0 0 280 180 V400 H400 V180 A30 30 0 0 0 370 150 V120 H0 Z" 
    fill="#2563eb"
  />
</svg>

修改A命令后的两个30px即可调整内凹曲率。

方法3：伪元素遮盖实现（实现成本最低） #

如果你的页面背景是纯色，直接用和背景同色的圆角伪元素遮盖交接处的直角即可：

/* 在容器上追加伪元素 */
.cross-shape::after {
  content: "";
  position: absolute;
  top: 210px;
  left: 250px;
  width: 30px;
  height: 30px;
  /* 只有左上角做圆角，其他角是直角 */
  border-radius: 0 0 0 30px;
  background: #ffffff; /* 和页面背景色保持一致 */
}

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