Programmiererforum

Ich versuche, einen Tachometer zu entwerfen, wie im Bild gezeigt:
Ich fällt mir schwer, dieses Design mit CSS zu machen. Also brauche ich Hilfe von einem CSS -Meister. Wie kann ich die Zahlen so platzieren, genau wie die blauen Balken?#speedometer .wrapper {
width: 500px;
height: 250px;
border: 1px solid red;
border-top-left-radius: 360px;
border-top-right-radius: 360px;
overflow: hidden;
position: relative;
}

#speedometer .wrapper .indicator-wrapper {
position: absolute;
left: 10%;
top: 20%;
width: 80%;
height: 80%;
border-top-left-radius: 360px;
border-top-right-radius: 360px;
background-color: #ffffff;
z-index: 400;
}

#speedometer .wrapper .bar {
width: 100%;
height: 100%;
position: absolute;
transform-origin: bottom center;
}

#speedometer .wrapper .bar-1 {
top: 0;
left: 0;
z-index: 200;
transform: rotate(-140deg);
/* background-color: rgb(114, 114, 238); */
background-color: green;
}

#speedometer .wrapper .bar-2 {
top: 0;
right: 0;
z-index: 150;
transform: rotate(-90deg);
/* background-color: rgb(69, 69, 204); */
background-color: yellow;
}

#speedometer .wrapper .bar-3 {
top: 0;
left: 0;
z-index: 100;
transform: rotate(-40deg);
/* background-color: rgb(40, 40, 180); */
background-color: purple;
}

#speedometer .wrapper .bar-4 {
top: 0;
left: 0;
z-index: 0;
transform: rotate(30deg);
/* background-color: rgb(15, 15, 167); */
background-color: red;
}< /code>









< /code>
< /div>
< /div>
< /p>
Ich brauche eine Menge Hilfe, um die Zahlen wie diese zu positionieren, die Zustände hinzuzufügen: 'gut', 'durchschnittlich', 'schlecht', 'sehr schlecht' oben. Fügen Sie ebenfalls den Abstand zwischen den Balken hinzu. Ich weiß, ich frage viel, aber die Wahrheit kostet mich viel. Vielen Dank für Ihre Hilfe