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

 <div class="line-wrap">
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="circle"></div>
          <div class="line"></div>
  </div>

.line-wrap {
  position: relative;
  margin-left: 15px;
  margin-top: 70px;
  display: inline-flex;
  width: 20px;
  height: 120px;
  .circle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid @primary-color;
    border-radius: 50%;
    z-index: 1;
 
    &::after {
      content: '';
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: @primary-color;
    }
  }
 
  .circle:nth-child(1) {
    top: 0;
    left: 0;
    transform: translateY(-35%) translateX(-50%);
  }
 
  .circle:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translateX(35%);
  }
 
  .circle:nth-child(3) {
    left: 0;
    bottom: 0;
    transform: translateY(35%) translateX(-50%);
  }
  .line {
    width: 100%;
    height: 100%;
    border: 1px solid @primary-color;
    border-radius: 0 100% 100% 0/50%;
    border-left: none;
  }
}

这段CSS代码定义了一个元素的样式，我们可以逐行解析它的作用：

csswidth: 100%;

这行代码设置元素的宽度为其父容器宽度的100%，意味着元素会尽可能地占据其父容器的全部宽度。

cssheight: 100%;

这行代码设置元素的高度为其父容器高度的100%，意味着元素会尽可能地占据其父容器的全部高度。

cssborder: 1px solid @primary-color;

这行代码设置了元素的边框样式。它定义了一个1像素宽的实线边框，颜色由@primary-color变量决定。@primary-color通常是一个在CSS预处理器（如Sass或Less）中定义的变量，它会在编译时替换为具体的颜色值。

cssborder-radius: 0 100% 100% 0/50%;

这行代码设置了元素的边框圆角。它使用了四个值来分别定义左上角、右上角、右下角和左下角的圆角半径。这里，左上角的半径是0（无圆角），右上角的半径是100%（完全圆角），右下角的半径也是100%（完全圆角），而左下角的半径是0（无圆角）。此外，斜杠后面的50%定义了水平方向上的圆角半径，这意味着水平方向上的圆角将是元素宽度的一半。这种设置通常用于创建特殊的形状，如半圆形或椭圆形。

cssborder-left: none;

这行代码将元素的左边框设置为无，即移除了左边框。

综合这些样式，元素将呈现为一个特殊的形状，其右侧和底部有完整的边框，左侧无边框，且右上角和右下角为完全的圆角，形成了一个类似“C”形状的视觉效果。同时，由于border-radius的水平半径设置为50%，元素在水平方向上将呈现出一个半圆形的外观。如果@primary-color是一个鲜明的颜色，这个元素将会非常显眼