我一直在努力创建一个采用半圆形状的开始评分,如下图所示。进度部分没有问题。问题是我需要沿着进度的路径放置10个星形笔触。星星将由进度背景颜色填充,因此无需更改其他进度的星星。星星是静止的。
关于如何执行此操作的任何建议将受到高度赞赏。
这是我到目前为止所取得的成就:
您可以对星星执行类似的操作,您必须正确放置星星,使其适合条形。如果使用任何类型的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>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>