Wie gestalten Sie einen Tachometer mit HTML und CSS?HTML

HTML-Programmierer
Anonymous
 Wie gestalten Sie einen Tachometer mit HTML und CSS?

Post by Anonymous »

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

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post