Is there a way to make this design responsive with dynamic scaling? My primary concern is managing the positioning of the meter scales without having to use absolute positioning. The main question here is: how can I stack elements on top of each other without them overlapping, while avoiding the use of position: absolute?
body {
background-color: #151515;
}
.meter {
height: 400px;
}
.meter-pointer {
width: 2px;
height: 200px;
background: #2c3e50;
transform: rotate(45deg);
transform-origin: bottom;
transition: transform 0.5s;
position: absolute;
margin-left: 50%;
}
.meter-dot {
width: 10px;
height: 10px;
background: #2c3e50;
border-radius: 50%;
position: absolute;
margin-top: calc(200px - 5px);
margin-left: calc(50% - 5px);
}
.meter-scale {
color: #cfcfcf;
width: 1px;
height: 200px;
transform-origin: bottom;
transition: transform 0.2s;
box-sizing: border-box;
border-top: 10px solid;
position: absolute;
margin-left: 50%;
}
.meter-scale-strong {
width: 2px;
border-top-width: 20px;
}<div class="meter">
<div class="meter-dot"></div>
<div class="meter-scale meter-scale-strong" style="transform: rotate(-45deg);"></div>
<div class="meter-scale" style="transform: rotate(-36deg);"></div>
<div class="meter-scale" style="transform: rotate(-27deg);"></div>
<div class="meter-scale" style="transform: rotate(-18deg);"></div>
<div class="meter-scale" style="transform: rotate(-9deg);"></div>
<div class="meter-scale meter-scale-strong" style="transform: rotate(0deg);"></div>
<div class="meter-scale" style="transform: rotate(9deg);"></div>
<div class="meter-scale" style="transform: rotate(18deg);"></div>
<div class="meter-scale" style="transform: rotate(27deg);"></div>
<div class="meter-scale" style="transform: rotate(36deg);"></div>
<div class="meter-scale meter-scale-strong" style="transform: rotate(45deg);"></div>
<div class="meter-pointer" style="transform: rotate(12deg);"></div>
</div>