CSS如何实现并排div相邻侧边弯曲并内嵌图片效果

• CSS语法和选择器匹配错误：属性名Display大小写错误，正确写法为小写display；CSS的ID选择器大小写敏感，你写的#Right和HTML中id="right"完全不匹配，对应样式根本没有生效
• 圆角设置逻辑错误：直接给右侧div加border-radius:30%会让四个角全部产生弧度，无法实现仅相邻侧边弯曲的效果
• 布局逻辑缺失：两个div宽度总和仅为80%，中间会留空隙；左侧div没有设置对应匹配的弧形，也没有做溢出隐藏处理，放入图片后会出现内容超出、变形、拼接缝隙等问题

核心是用border-radius的单角配置语法，仅给两个div相邻位置的对角设置弧形，配合负外边距让两个弧边完全贴合，内部图片用object-fit: cover实现不变形铺满容器。
弧形拼接效果参考图

完整代码 #

<div id="box">
  <div id="left">
    <img src="替换为你的左侧图片地址" alt="左侧展示图">
  </div>
  <div id="right">
    <img src="替换为你的右侧图片地址" alt="右侧展示图">
  </div>
</div>

#box {
  display: flex;
  width: 100%;
}
#left {
  height: 300px;
  width: 50%;
  /* 仅设置右下角弧度，形成向右凸出的曲线边 */
  border-bottom-right-radius: 120px;
  /* 负右外边距抵消弧边占用的空隙，让两个div无缝拼接 */
  margin-right: -20px;
  overflow: hidden;
  /* 提高层级保证弧边压在右侧div上方，避免拼接缝隙 */
  position: relative;
  z-index: 2;
}
#right {
  height: 300px;
  width: 50%;
  /* 仅设置左上角弧度，和左侧div的凸弧完全匹配 */
  border-top-left-radius: 120px;
  overflow: hidden;
}
/* 图片铺满容器不变形 */
#left img, #right img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

• 弧度大小：修改border-bottom-right-radius和border-top-left-radius的数值即可调整弯曲程度，数值越大弧度越明显；需要更自然的非正圆弧线可以用双值语法，比如border-bottom-right-radius: 100px 160px分别控制水平、垂直方向的曲率
• 拼接缝隙：配合弧度大小调整margin-right的负数值，保证两个弧边完全贴合，没有空隙也不会过度重叠
• 弧度方向：如果需要做反向的弧形拼接，只需要把圆角属性替换为左侧div的border-top-right-radius、右侧div的border-bottom-left-radius即可

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