How to create semi-circle/ellipse with HTML CSS? Like a gauge/speedometer

Question

I'm trying to do something like this:

It's not a full or semi circle, and the edges have a little radius. Also need to contain some point to show the current position in percentage. Can someone give me a light on how to put together something close to the 3 ideas below?

.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, #6ECE34, #E6A749, #E5A749, #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>

Does this answer your question? [Half circle with CSS (border, outline only)](https://stackoverflow.com/questions/22415651/half-circle-with-css-border-outline-only) — GucciBananaKing99, Apr 23 '21 at 19:47
It's nice @j08691, but I really don't want use JS in this, I want something more light and clean. However, I will try to extract something in this. — gSalzmann, Apr 23 '21 at 20:26
No @GucciBananaKing99 =/. it's the simplest way and doesn't have a lot of customization, it's the first example of my snippet. — gSalzmann, Apr 23 '21 at 20:28

A Haworth · Accepted Answer · 2021-04-24T08:25:21.050

You can cobble together that look and functionality using CSS for the look and updating CSS variables for the pointer position/slope in whatever language you are using to update the speeds.

Here's a snippet for the look with --pointerleft, --pointerright and --pointerdeg set just for the demo. In the operational code you'd need to do some trigonometry to calculate these given the particular speed at the time and then set the CSS variables (e.g. in JS).

Whether using radial and conic gradients and then having to position the little round bits at the ends can be said to be a recommendation I don't know. SO doesn't like recommendations but I'll risk it and suggest this works but is a bit hacky and an SVG might be better.

Note, the snippet just has a simple 3 color conic gradient, you can add more/different colors at different degrees as required.

.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%, transparent 50%, transparent 100%), 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>

That's awesome man, thanks. I was impressed by the similarity. I will adapt the relative values to fit the DIV I need and also, like you said, some trigonometric function to be able to calculate the position of the pointer. I liked your idea of making the round ends, kind of hacky in fact but functional. — gSalzmann, Apr 24 '21 at 23:00

score 1 · Answer 2 · answered Sep 05 '21 at 14:23

I revised the code above in order to make it easier to dynamically configure the percentage and colors.

I also leave this other alternative here:

.gauge{
    height: 85px;
    /*overflow: hidden;*/
    position: relative;
    width: 170px;
}
.gauge .arc{
    background-image:
        radial-gradient(#fff 0, #fff 60%, transparent 60%),
        conic-gradient(red 0, orange 135deg, #ccc 135deg, #ccc 180deg, #fff 180deg, #fff 360deg);
    background-position: center center, center center;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
    border-radius: 50%;
    border-style: none;
    height: 170px;
    position: relative;
    transform: rotate(-90deg);
    width: 100%;
}
.gauge .pointer{
    background: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    bottom: 0;
    content: '';
    height: 6px;
    left: 0;
    position: absolute;
    transform: rotate(135deg) translateX(2px) translateY(-6px);
    transform-origin: 85px 0;
    width: 20px;
    z-index: 5;
}
.gauge .mask::before,
.gauge .mask::after{
    background-image: radial-gradient(transparent 0, transparent 50%, #fff 50%, #fff 100%);
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
    content: '';
    height: 18px;
    position: absolute;
    width: 18px;
}
.gauge .mask::before{
    left: -2px;
    bottom: 0;
}
.gauge .mask::after{
    bottom: 0;
    right: -2px;
}
.gauge .label{
    bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    left: 0;
    line-height: 26px;
    position: absolute;
    text-align: center;
    width: 100%;
}

<div class="gauge">
    <div class="arc"></div>
    <div class="pointer"></div>
    <div class="mask"></div>
    <div class="label">75% (135°)</div>
</div>

How to create semi-circle/ellipse with HTML CSS? Like a gauge/speedometer

2 Answers2

Linked