html - 在尝试制作圆形仪表时，我认为某些代码中的故障令我感到难过

Question

我正在使用此代码构建圆形仪表：https ://codepen.io/Hiswe/pen/evCxr但是当我更改标记代码中的值时，仪表不会在 50% 和 60% 之间变化。即，如果标记示例中的 html 数字从 66 更改为 59，并且 css 也进行了类似的更改，那么无论设置什么角度，仪表都会停留在 50 / 180 度。

它对 50 到 59 之间的所有值执行此操作。有人有什么想法吗？

/*h2:nth-of-type(1), section:nth-of-type(1), h2:nth-of-type(2), section:nth-of-type(2) {
display: none;
}*/

.gauge-markup {
  width: 5em;
  height: 5em;
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  position: relative;
  border: 1px solid #335;
  text-indent: -999em;
  margin: .5em;
}

.gauge-markup::before {
  content: attr(data-fill);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
}

.gauge-markup,
.gauge-markup span,
.gauge-markup span::before,
.gauge-markup span::after {
  border-radius: 10em;
}

.gauge-markup span,
.gauge-markup span::before,
.gauge-markup span::after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Container clipping handling */

.gauge-markup[data-fill^="6"] span,
.gauge-markup[data-fill^="7"] span,
.gauge-markup[data-fill^="8"] span,
.gauge-markup[data-fill^="9"] span,
.gauge-markup[data-fill^="10"] span {
  clip: rect(auto, auto, auto, auto)
}

.gauge-markup span,
.gauge-markup[data-fill="6"] span,
.gauge-markup[data-fill="7"] span,
.gauge-markup[data-fill="8"] span,
.gauge-markup[data-fill="9"] span,
.gauge-markup[data-fill="10"] span {
  clip: rect(0, 5em, 5em, 2.5em);
}

.gauge-markup span::before,
.gauge-markup span::after {
  border: 1em solid #335;
  content: '';
  clip: rect(0, 2.5em, 5em, 0);
}

.gauge-markup span::before {
  transform: rotate(180deg);
}


/* All the values can be computed by a css pre processor loop */

.gauge-markup[data-fill="0"] span::before {
  transform: rotate(0deg)
}

.gauge-markup[data-fill="6"] span::before {
  transform: rotate(10.8deg)
}

.gauge-markup[data-fill="25"] span::before {
  transform: rotate(90deg)
}

.gauge-markup[data-fill="33"] span::before {
  transform: rotate(151.2deg)
}

.gauge-markup[data-fill="50"] span::before {
  transform: rotate(180deg)
}

.gauge-markup[data-fill="59"] span::after {
  transform: rotate(-144.8deg)
}

.gauge-markup[data-fill="75"] span::after {
  transform: rotate(-90deg)
}

<h2>Any size, transparent background but additional markup</h2>
<section>
  <div class="gauge-markup" data-fill="0">0 <span /></div>
  <div class="gauge-markup" data-fill="6">6 <span /></div>
  <div class="gauge-markup" data-fill="25">25<span /></div>
  <div class="gauge-markup" data-fill="33">33<span /></div>
  <div class="gauge-markup" data-fill="50"> 50 <span /></div>
  <div class="gauge-markup" data-fill="59">59<span /></div>
  <div class="gauge-markup" data-fill="75">75<span /></div>
  <div class="gauge-markup" data-fill="100">100<span /></div>
</section>

标签： htmlcss

Answer 1

我确实开始尝试理解给出的代码，因此按设置回答问题。

然而，我发现它与它试图实现的目标相比非常复杂 - 特别是因为它需要对各种值进行一些预处理，并且它在 HTML 中有一个额外的 span 元素，否则它是多余的。它还使用伪元素中的内容将数字放入仪表中，以使其居中，这在当今很聪明但没有必要。

所以这里有一个更简单的方法的建议。每个仪表都有其值集，但作为 CSS 变量（--pc - 百分比）而不是 data- 属性。然后 CSS 使用它来计算所需的度数，因此我们不需要任何预处理。

弧线和半透明背景由每个仪表上的圆锥和径向渐变组合绘制。

从理论上讲，两次获得百分比是多余的，因为我们可以再次考虑使用伪元素将值放入仪表的想法，但这可能会损害可访问性，因此两者都被保留了。

.gauge-markup {
  --bg: rgba(0, 0, 0, 0.05);
  --border: #335;
  --deg: calc((var(--pc) * 360deg) / 100);
  width: 5em;
  height: 5em;
  position: relative;
  border: 1px solid var(--border);
  margin: .5em;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  background-image: radial-gradient(var(--bg) 0, var(--bg) 50%, transparent 50%, transparent 100%), radial-gradient(white 0, white 50%, transparent 50%, transparent 100%), conic-gradient(var(--border) 0, var(--border) var(--deg), var(--bg) var(--deg), var(--bg) 360deg);
}

<section>
  <div class="gauge-markup" style="--pc: 0">0</div>
  <div class="gauge-markup" style="--pc: 6">6</div>
  <div class="gauge-markup" style="--pc: 25">25</div> 
  <div class="gauge-markup" style="--pc: 33">33</div> 
  <div class="gauge-markup" style="--pc: 50">50</div> 
  <div class="gauge-markup" style="--pc: 59">59</div> 
  <div class="gauge-markup" style="--pc: 75">75</div>
  <div class="gauge-markup" style="--pc: 100">100</div>
</section>