javascript - 沿半圆形形状的星级

Question

我一直在努力创建一个类似于下图的半圆形形状的起始评分。进度部分没有问题。问题是我需要沿着进度的路径放置 10 笔星形。星星会根据进度背景颜色填充，所以不需要更改不同进度的星星。星星是静止的。

任何有关如何执行此操作的建议将不胜感激。

这是我到目前为止所取得的成就：

标签： javascripthtmlcss

Answer 1

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

这只是一个粗略的想法，向您展示它可以使用。您需要调整位置以及可能的角度以适合​​您的弧线。这些星星使用 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>