边界半径为50%,使用伪元素进行凹边界

Question

我想创建一个边界半径为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>