css 画半圆弧线，加圆圈定位

要使用CSS画一个半圆弧线并加上圆圈定位，可以使用以下方法：

HTML:

<div class="half-circle">
  <div class="circle"></div>
</div>

CSS:

.half-circle {
  position: relative;
  width: 100px;
  height: 50px;
  overflow: hidden;
}
 
.half-circle:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  border-radius: 50%;
  transform: translateX(-50%);
}
 
.circle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
}

这段代码创建了一个宽100px, 高50px的容器.half-circle，使用:before伪元素创建了一个半圆弧，并通过overflow: hidden隐藏了右半部分。容器内的.circle用来作为白色圆圈，通过定位和border-radius属性实现圆形。