半圆形的星级

问题描述 投票:-1回答:1

我一直在努力创建一个采用半圆形状的开始评分,如下图所示。进度部分没有问题。问题是我需要沿着进度的路径放置10个星形笔触。星星将由进度背景颜色填充,因此无需更改其他进度的星星。星星是静止的。

enter image description here

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

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

enter image description here

javascript html css
1个回答
0
投票

您可以对星星执行类似的操作,您必须正确放置星星,使其适合条形。如果使用任何类型的CSS预处理程序,都可以在函数中进行计算。

div {
  position: relative;
  margin-left: 90px;
}
span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: left left;
}
div :nth-child(1) {
  transform: rotate(-10deg);
}
div :nth-child(2) {
  transform: rotate(-30deg);
}
div :nth-child(3) {
  transform: rotate(-50deg);
}
div :nth-child(4) {
  transform: rotate(-70deg);
}
div :nth-child(5) {
  transform: rotate(-90deg);
}
div :nth-child(6) {
  transform: rotate(10deg);
}
div :nth-child(7) {
  transform: rotate(30deg);
}
div :nth-child(8) {
  transform: rotate(50deg);
}
div :nth-child(9) {
  transform: rotate(70deg);
}
div :nth-child(10) {
  transform: rotate(90deg);
}
<div>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
  <span>&#9734;</span>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.