如何实现两个div元素的弧形衔接效果？

如下图所示：

我有一个底部div，其左上角和右上角向内弯曲。该div宽度为100%，高度固定为100px。

BOTTOM DIV

width: 100%;
height: 100px;
background: white;
border-top-left-radius: ???px;
border-top-right-radius: ???px;

我还有一个绿色的顶部div，需要与底部div的左上/右上弧形衔接。

TOP DIV

width: ???;
height: 15px;
border-bottom-left-radius: ???px;
border-bottom-right-radius: ???px;

如何让两个div实现弧形互相衔接？顶部div宽度与底部div不同（左右各短几个像素），我不知道如何让它们动态匹配。

用CSS变量统一控制参数，再通过calc()计算动态值，就能让两个div的弧形完美衔接：

1. 先定义全局CSS变量，统一管理关键参数：

:root {
  --corner-radius: 20px; /* 圆角基础半径，可按需调整 */
  --top-offset: 10px; /* 顶部div左右缩进的像素值 */
}

2. 设置底部div的样式：

.bottom-div {
  width: 100%;
  height: 100px;
  background: white;
  border-top-left-radius: var(--corner-radius);
  border-top-right-radius: var(--corner-radius);
}

3. 设置顶部div的样式：

.top-div {
  width: calc(100% - 2 * var(--top-offset));
  height: 15px;
  background: green;
  margin: 0 auto; /* 让顶部div居中，自动留出左右缩进 */
  border-bottom-left-radius: calc(var(--corner-radius) - var(--top-offset));
  border-bottom-right-radius: calc(var(--corner-radius) - var(--top-offset));
}

原理说明 #

• CSS变量让参数修改更便捷，只需调整--corner-radius和--top-offset，两个div的样式会自动同步
• 顶部div宽度通过calc(100% - 2*缩进值)计算，确保左右各缩进指定像素
• 圆角匹配的核心：底部div的内凹圆角基于自身100%宽度，顶部div缩进后，用基础半径 - 缩进值作为底部圆角半径，能让两个弧形的曲率完全对齐

如果需要适配不同高度的情况，还可以用border-radius的二值写法分别控制水平/垂直方向半径：

.bottom-div {
  border-top-left-radius: var(--corner-radius) var(--corner-radius);
}
.top-div {
  border-bottom-left-radius: calc(var(--corner-radius) - var(--top-offset)) var(--corner-radius);
}

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