Looking to create a fully responsive gauge using only CSS, ranging from 0-100% with a gradient color transition from green to red. After encountering issues with existing examples, I conducted tests and ultimately developed a solution that somewhat meets the requirements. The concept involves a background div with a linear gradient as well as a foreground div with semi-transparent borders, complemented by border-radius for rounding. By rotating the foreground div, different parts of the gradient background are revealed or concealed.
However, there is a persistent visual glitch that requires addressing:
https://i.sstatic.net/vEyPR.png
The white borders of the foreground div do not completely overlay the gradient div in some areas.
You can explore my test code below (which may include unnecessary CSS rules resulting from prior experimentation):
https://jsfiddle.net/fLtzrg3w/
HTML:
<div class="c">
<div class="go">
<div class="g"></div>
<div class="gbg"></div>
</div>
</div>CSS:
.c{
position: relative;
float:left;
text-align: center;
width: 50%;
padding: 25% 5px 0 5px;
height: 1rem;
overflow:hidden;
}
.go{
position: relative;
width: 100%;
overflow: hidden;
padding-top:100%;
margin-top: -50%;
}
.g{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
box-sizing: border-box;
border: 40px solid transparent;
border-bottom-color: #fff;
border-right-color: #fff;
transform: rotate(20deg);
background: white;
background-clip: padding-box;
z-index: 2;
}
.gbg{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
box-sizing: border-box;
background: linear-gradient(to right, green 0%, yellow 50%, red 100%);
z-index: 1;
}How can I ensure the white div completely masks the background gradient div?