How to merge and fill the color in two circle using CSS-CodePudding

I have tried the above shape. but can not able to achieve this

.left {
  background: linear-gradient( -90deg, #fff, #fff 38%, red 22%) !important;
  border: 1px solid blue;
  margin-left: -9px;
  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;
  margin: auto 4px !important;
  position: absolute !important;
  top: 0 !important;
  transition: all 0.2s linear !important;
  width: 18px !important
}

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

CodePudding user response：

You could accomplish this by carefully stacking three circles in a wrapper:

A filled circle on the right
A hollow circle atop it to the left
Another hollow circle at the top of the stack on the right

That said, I'd tend to agree with @Paulie_D that this may not be worth the effort to do w/ plain markup, and that SVG would be better.

See it working below:

.wrapper {
  width: 60px;
  position: relative;
}

.circle {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  border: 2px solid blue;
}

.filled {
  background-color: blue;
}

.fill-white {
  background-color: white;
}

.left {
  position: absolute;
  left: 0;
}

.right {
  position: absolute;
  right: 0;
}

<div class="wrapper">
  <div class="circle filled right"></div>
  <div class="circle fill-white left"></div>
  <div class="circle right"></div>
</div>

CodePudding user response：

gradient coloration can help you here. Hover the below to see the result

.box {
  width:100px;
  height:100px;
  border:2px solid blue;
  box-sizing:border;
  border-radius:50%;
  position:fixed;
  top:0;
  left:100px;
}
.box   .box {
  left:180px;
  transition:0.5s;
  background:
    radial-gradient(
      circle 50px  /* half the width/height of the circle*/
      at 152px 52px, /* 152px = 100px (left)   50px   2px (border) 52px = 0 (top)   50px   2px (border)*/
      blue 98%,#0000) fixed;
}

html:hover .box   .box {
  left:20px;
}

<div class="box"></div>
<div class="box"></div>