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
Wie gestalten Sie einen Tachometer mit HTML und CSS? ⇐ HTML
-
- Similar Topics
- Replies
- Views
- Last post