如何将半圆边框半径减半？或移除红框上方黄线仅留下方（HTML/CSS）

完全可以通过调整CSS属性满足你的两个需求，不需要使用JavaScript。以下是修改后的代码和对应说明：

修改后的完整代码 #

CSS 部分 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.container {
  width: 500px;
  height: 500px;
  border: 3px solid black;
  border-radius: 50%;
  margin: 100px auto;
  position: relative;
}

.content {
  width: 50%;
  border: 3px solid red;
  position: relative;
  left: 50%;
  top: 50%;
  transform: rotate(-90deg);
  transform-origin: left;
  animation: animasyon 2s linear infinite normal paused;
}

.ring {
  /* 需求1：半圆半径减半，原宽高500px（对应半径250px）改为250px（半径125px） */
  width: 250px;
  height: 250px;
  border: 5px solid goldenrod;
  position: absolute;
  border-radius: 50%;
  /* 需求2：仅保留下方黄线，将边框样式改为仅显示下边框 */
  border-style: none none solid none;
  transform: translate(-50%, -50%);
}

.content::after {
  content: '';
  width: 25px;
  height: 25px;
  background-color: blueviolet;
  position: absolute;
  top: -12px;
  left: 100%;
}

@keyframes animasyon {
  0% {
    transform: rotate( 0deg);
  }
  25% {
    transform: rotate( 90deg);
  }
  50% {
    transform: rotate( 180deg);
  }
  75% {
    transform: rotate( 270deg);
  }
  100% {
    transform: rotate( 360deg);
  }
}

HTML 部分（无需修改） #

<div class="container">
  <div class="content">
    <div class="ring"></div>
  </div>
</div>

修改细节说明 #

1. 半圆边框半径减半：
   原.ring的宽高为500px，对应半圆半径250px，直接将宽高改为250px，即可让半圆半径变为原来的一半（125px）。

2. 仅保留下方黄线：
   原.ring通过border-style: none solid none none仅显示右边框，但由于.content设置了rotate(-90deg)，这个右边框会被旋转到红框上方。我们将border-style改为none none solid none，仅显示下边框，旋转后就会对应到红框的下方位置，同时移除了上方的黄线。

内容的提问来源于stack exchange，提问作者maaarrr