Is it possible to create a quad circle with border-radius in css?

Question

Recently I started creating a HUD for my server and I am stuck to the point I don't know what to do anymore, I am not that experienced with CSS but I've got some knowledge.

I am trying to make this kind of circle View it on here

.circle {
    position: relative;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-width: 22px;
    border-style: solid;
    border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
    transform: rotate(25deg);
  }

  
  .wide {
    width: 200px;
    height: 200px;
  }

<div class="circle wide"></div>

I attempted creating it with this code, it's close but not really.

Most would just use `transparent`, but it does take a couple more characters... — Heretic Monkey, Aug 08 '22 at 13:47
What do you think needs to be done to make it close but really? :) — Heretic Monkey, Aug 08 '22 at 13:48
@HereticMonkey There are actually 3 colors on the circle, and I am trying to make each color on top of each other if that makes sense — Swirls, Aug 08 '22 at 13:49
You could just make three circles and use `z-index` to layer them. You'd have to figure out how to make the inner two narrower but with the same curve. The real problem is that using borders limits you to showing/hiding quarters of the circle, so you'd have to clip that red circle and use the rotation to get precision higher that 25%. Also, the example you're trying to mimic uses something like 60% of a circle, not 50% or 75%... — Heretic Monkey, Aug 08 '22 at 14:09

score 0 · Answer 1 · answered Aug 08 '22 at 14:42

Highlights

position: absolute; and transform: translate to move tags around
outline-offset is that orange line in the middle
the icons are Unicode characters
the panel is a <form> with 2 <button>s and a <meter>

It not great but you can't expect anything good without any SVG or images (too much work).

.circle {
  position: relative;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-width: 22px;
  border-style: solid;
  border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
  outline: solid 6px orange;
  outline-offset: -14px;
  transform: rotate(0deg);
}

.wide {
  width: 200px;
  height: 200px;
}

.panel {
  display: inline-block;
  position: absolute;
  top: -8px;
  right: -8px;
  width: 7rem;
  padding: 0 6px 6px 6px;
  border-radius: 12px;
  transform: rotate(90deg) translateY(-240%);
  transform-origin: left center;
  background: #333;
}

.panel b {
  display: inline-block;
  transform: rotate(-90deg);
  margin-right: 8px;
}

button {
  width: 30%;
  padding: 0;
  border: 0.5px;
  border-radius: 4px;
  background: rgba(51,51,51,0.3);
  cursor: pointer;
}

button:hover {
  background: gold;
}

.power {
  width: 70%;
  transform: rotate(-180deg);
}

.view {
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: 'Segoe UI';
  font-size: 5.5rem;
  color: #aaa;
 }

<div class="circle wide">
  <output class='view'>85</output>
  <form class='panel'>
    <label><b>⛽</b><meter class='power' value="6" min="0" max="10"></meter></label><br>
    <button class='btn' type='button'></button>
    <button class='btn' type='reset'></button>
    <button class='btn' type='submit'>️</button>
  </form>
</div>

Is it possible to create a quad circle with border-radius in css?

1 Answers1