如何使用 HTML CSS 创建半圆/椭圆？像仪表/车速表

如何解决如何使用 HTML CSS 创建半圆/椭圆？像仪表/车速表

我正在尝试做这样的事情：

它不是一个完整的或半圆形的，边缘有一点半径。还需要包含一些点以百分比显示当前位置。有人可以告诉我如何将接近以下 3 个想法的东西组合在一起吗？

.circle {
   display: flex;
   width: 200px;
   height: 100px;
   border-top-left-radius: 200px;
   border-top-right-radius: 200px;
   border: 10px solid gray;
   border-bottom: 0;
}

.circle>.text {
   font-size: 50px;
   margin: auto;
}

.circle.gradient {
   margin-top: 30px;
   border-image-slice: 1;
   border-width: 10px;
   border-bottom: 0;
   border-image-source: linear-gradient(to left,#6ECE34,#E6A749,#E5A749,#F71C1C);
}

.line {
   position: relative;
   margin-top: 30px;
   width: 220px;
   height: 10px;
   border-radius: 5px;
   background: linear-gradient(to left,#F71C1C);
}

.line>.point {
   position: absolute;
   top: -3px;
   left: 21%;
   width: 8px;
   height: 16px;
   border-radius: 5px;
   border: 1px solid black;
   background: #FFF;
}

<!-- Just semi circle -->
<div class="circle">
   <div class="text">
      21
   </div>
</div>

<!-- With gradient border -->
<div class="circle gradient"></div>

<!-- Maybe strech in Y -->
<div class="line">
   <!-- Relative point -->
   <div class="point"></div>
</div>

解决方法

您可以使用 CSS 将外观和功能拼凑在一起，用于外观和更新用于更新速度的任何语言的指针位置/斜率的 CSS 变量。

以下是仅用于演示的--pointerleft、--pointerright 和--pointerdeg 设置的外观片段。在操作代码中，您需要做一些三角函数来计算给定当时的特定速度，然后设置 CSS 变量（例如在 JS 中）。

是否使用径向和圆锥渐变，然后必须在末端放置小圆点可以说是我不知道的建议。 SO 不喜欢推荐，但我会冒险并建议这样做，但有点麻烦，SVG 可能会更好。

注意，代码片段只有一个简单的 3 色圆锥渐变，您可以根据需要添加更多/不同程度的不同颜色。

.ring {
  position: relative;
  --pointerleft: 11%;
  --pointertop: 11%;
  --pointerdeg: -45deg;
  width: 50vmin;
  height: 50vmin;
  background-image: radial-gradient(red 0,red 50%,transparent 50%,transparent 100%),radial-gradient(green 0,green 50%,radial-gradient(white 0,white 60%,transparent 60%),conic-gradient(orange 0,green 130deg,white 130deg,white 230deg,red 230deg,orange 360deg);
  background-size: 11% 11%,11% 11%,100% 100%,100% 100%;
  background-repeat: no-repeat;
  background-position: 9.2% 82.3%,90.8% 82.3%,center center,center center;
  border-radius: 50%;
  border-style: none;
}

.ring::after {
  position: absolute;
  content: '';
  width: 5%;
  height: 15%;
  left: var(--pointerleft);
  top: var(--pointertop);
  transform: rotate(var(--pointerdeg));
  border-style: solid;
  border-width: 0.5vmin;
  border-radius: 2vmin;
  background-color: white;
}

.speed {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  color: gray;
}

.speed .number {
  font-size: 6vw;
}

.speed .units {
  font-size: 3vw;
}

<div class="ring">
  <div class="speed">
    <div class="number">21</div>
    <div class="units" style=";">km/h</div>
  </div>
</div>