边框半径 50%，带有使用伪元素的凹形边框

【问题标题】：Border radius 50% with concave border using pseudo elements边框半径 50%，带有使用伪元素的凹形边框
【发布时间】：2017-12-14 10:36:28
【问题描述】：

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

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

【问题讨论】：

你的尝试是否试图解决这个问题？只需绝对定位伪元素，并将其设为宽度的一半……？

标签： css pseudo-element

【解决方案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;
}

&lt;div id="circle"&gt;&lt;/div&gt;

【讨论】：