I am looking to create a half arc in CSS with various colors, similar to the image provided.
https://i.sstatic.net/tIPaN.png
Here is the code I have used:
HTML
<div class="gradient">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>
</div>
CSS
.gradient span{
height: 10px;
display: block;
width: 100px;
}
.gradient .one{
background-color: red;
}
.gradient .two{
background-color: green;
}
.gradient .three{
background-color: yellow;
}
.gradient .four{
background-color: black;
}
.gradient .five{
background-color: orange;
}
I am actually trying to create a half gauge meter in CSS with rounded corners for each span element.