如何使用CSS通过背景色为div左右两侧添加半圆曲线效果

你原有代码没有设置伪类的宽度、垂直定位参数，且圆角方向、背景色设置不符合凹陷效果的需求，因此无法得到预期效果，修改后的实现代码如下：

核心修改要点 #

• 给:before、:after伪类设置与半圆直径相等的宽高，可按需调整数值
• 给伪类设置垂直居中定位，保证半圆出现在卡片左右两侧的中间位置
• 伪类背景设置为卡片外部的页面背景色，以此模拟向内凹陷的效果
• 调整伪类的左右偏移值，保证半圆和卡片边缘完美贴合

完整代码 #

CSS代码 #

.card {
  height: 190px;
  background: #070B32;
  width: 360px;
  position: relative;
  /* 可选配置：给内部内容加左右内边距，避免内容被半圆遮挡 */
  padding: 0 20px;
  box-sizing: border-box;
}

.card:before {
  position: absolute;
  content: "";
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 此处背景色需和卡片外部的实际页面背景色保持一致 */
  background: #fff;
}

.card:after {
  position: absolute;
  content: "";
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 此处背景色需和卡片外部的实际页面背景色保持一致 */
  background: #fff;
}

HTML代码 #

<div class="card">
  <!-- 可在此处添加卡片内部内容 -->
</div>

调整说明 #

如果需要修改半圆的尺寸，直接调整伪类的width和height参数即可，同步修改left/right的偏移值为宽高的负二分之一，就能保证半圆和卡片边缘贴合。

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