css - 边框半径 50%，凹边框使用伪元素

Question

我想创建一个 border-radius 为 50% 并具有蓝色背景的 div，这样曲线的右侧部分应该用另一种颜色填充，比如浅蓝色。我们如何使用 css 伪元素做到这一点

#circle{
  width: 50px;
  height: 50px;
  background: blue;
  border-radius: 50%;
}

Answer 1

您可以使用以下解决方案:

#circle{
  width: 50px;
  height: 50px;
  background: blue;
  border-radius: 50%;
  position:relative;
}
#circle:after {
content:"";
  display:block;
  position:absolute;
  left:50%;
  top:0;
  height:100%;
  width:50%;
  background:lightblue;
  z-index:-1;
}

<div id="circle"></div>