I want to create a horseshoe-shaped gauge using CSS that resembles the image below:
My attempt involved creating a circle and cutting off the bottom, similar to the technique demonstrated in this fiddle: http://jsfiddle.net/Fz3Ln/12/
Here's the markup I used:
<div class="container">
<div class="horse-shoe-gauge"></div>
</div>
And here's the CSS styling:
.container {
width: 200px;
height: 180px;
overflow: hidden;
}
.horse-shoe-gauge {
width: 200px;
height: 200px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 10px solid black;
box-sizing: border-box;
}
However, achieving the perfectly rounded bottom has been challenging for me.
If you have any tips or suggestions on how to improve my approach, I would greatly appreciate it. Thank you.