javascript - 沿着半圆形的星级评分

Question

我一直在努力创建一个如下图所示的半圆形的起始评级。进度部分没问题。问题是我需要沿着进度路径放置 10 个星形笔划。星星会根据进度背景颜色填充，因此无需更改不同进度的星星。星星是静态的。

任何有关如何执行此操作的建议都将受到高度赞赏。

这是我迄今为止所取得的成就:

Answer 1

你可以对星星做这样的事情，你必须正确定位它们，以便它们适合 strip 。如果您使用任何类型的 CSS 预处理器，您可以在函数中进行计算。

这只是一个粗略的想法，旨在向您展示它的用途。您需要调整位置和可能的 Angular 以适合​​您的弧线。这些星星使用 html 实体，如果需要，您可以将其替换为图像(需要背景透明度)

.crescent {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border: 1px solid red;
  height: 222px;
  width: 222px;
}
.stars {
  position: absolute;
  margin-left: 97px;
  transform: rotate(-2deg);
}
.stars div {
  font: 26px Monaco, MonoSpace;
  height: 110px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}
.stars :nth-child(1) {
  transform: rotate(-10deg);
}
.stars :nth-child(2) {
  transform: rotate(-30deg);
}
.stars :nth-child(3) {
  transform: rotate(-50deg);
}
.stars :nth-child(4) {
  transform: rotate(-70deg);
}
.stars :nth-child(5) {
  transform: rotate(-90deg);
}
.stars :nth-child(6) {
  transform: rotate(10deg);
}
.stars :nth-child(7) {
  transform: rotate(30deg);
}
.stars :nth-child(8) {
  transform: rotate(50deg);
}
.stars :nth-child(9) {
  transform: rotate(70deg);
}
.stars :nth-child(10) {
  transform: rotate(90deg);
}

<div class="crescent">
  <div class="stars">
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
    <div>&#9734;</div>
  </div>
</div>