如何使用CSS实现两个圆形的合并及对应区域颜色填充效果

你现有代码的渐变配置参数存在误差，导致无法得到对半分的双色圆形效果，可参考以下修正后的代码实现需求：

修正后的CSS代码 #

/* 父容器需加相对定位，确保子元素的绝对定位参照父容器 */
.container {
  position: relative;
  height: 30px;
}
.left {
  /* 渐变调整为从左到右，前50%红色，后50%白色 */
  background: linear-gradient(to right, red 50%, #fff 50%) !important;
  border: 1px solid blue;
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
  border-radius: 50%;
  bottom: 0;
  height: 18px;
  left: 0;
  margin: auto 0;
  position: absolute;
  top: 0;
  transition: all 0.2s linear;
  width: 18px;
}

.right {
  background-color: transparent;
  border: 1px solid blue;
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%) !important;
  border-radius: 50% !important;
  bottom: 0 !important;
  height: 18px !important;
  /* 调整left定位值，和左侧圆点错开位置 */
  left: 28px;
  position: absolute !important;
  top: 0 !important;
  transition: all 0.2s linear !important;
  width: 18px !important
}

修正后的HTML代码 #

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

调整说明 #

• 线性渐变的方向和占比调整为从左到右各占50%，刚好实现对半分的双色效果
• 新增父容器相对定位配置，避免圆点相对于整个页面定位
• 调整右侧圆点的定位规则，避免两个圆点重叠

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