如何在不使用“位置：绝对”的情况下堆叠元素而不相互干扰？

Question

如何将其转换为能够使用动态缩放？我的主要问题是我不知道如果没有个人meter-scale 的position 是absolute，我将如何处理粉丝（meter-scale）。这一切都归结为一个问题：如何在不使用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>

Answer 1

我的想法是在不需要大量 html 代码的情况下使用渐变、蒙版和剪辑路径

.meter {
  width:300px; /* it's responsive, simply change the width */
  display:grid;
  margin:auto;
}
.meter::before,
.meter::after,
.meter i{
  content:"";
  grid-area:1/1;
  padding-top:50%;
}
.meter::before,
.meter i{
  border-radius:400px 400px 0 0;
  clip-path:polygon(-10% 0,110% 0,50% 100%);
  background:repeating-conic-gradient(from -.5deg at bottom,red 0 1deg,#0000 0 9deg);
  -webkit-mask:radial-gradient(farthest-side at bottom,#0000 calc(100% - 15px),#000 0); 
}
.meter i {
  background:repeating-conic-gradient(from -.5deg at bottom,red 0 1deg,#0000 0 45deg);
  -webkit-mask:radial-gradient(farthest-side at bottom,#0000 calc(100% - 30px),#000 0); 
}
.meter::after {
  width:20px;
  z-index:1;
  margin:0 auto -10px;
  background:
    linear-gradient(blue 0 0) top/3px calc(100% - 10px),
    radial-gradient(farthest-side,blue 97%,#0000) bottom/20px 20px;
  background-repeat:no-repeat;
  transform-origin:50% calc(100% - 10px);
  transform:rotate(10deg); /* adjust this */
}

<div class="meter"><i></i></div>