边界半径为50％，使用伪元素进行凹边界

Question

我想创建一个边界半径为50％并且具有蓝色背景的div，使得曲线的右侧部分应该填充另一种颜色，例如淡蓝色。我们如何使用css伪元素

来做到这一点

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

Answer 1

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;