JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clipper">
    <div id="round">
    </div>
    <div id="clipper2">
        <div id="meter"></div>
    </div>
</div>

CSS

#clipper{
    height:50px;
    width:154px;
    position:relative;
    overflow:hidden;
    margin:0 auto;
}
#round{
    z-index: 10;
    margin:0 -8px;
    width:170px;
    height:170px;
    -webkit-border-radius: 85px;
    -moz-border-radius: 85px;
    border-radius: 85px;
    background: #FF0000;
    box-shadow: 0 0 12px rgba(75,42,56,0.4) inset;
    overflow: hidden;
    position: relative;
}
#clipper2{
    z-index: 11;
    height:170px;
    width:170px;
    position:absolute;
    bottom:0;
    left:-8px;
    overflow:hidden;
    -webkit-transform: rotate(-150deg);
    -webkit-transform-origin: 50% 100%;
    -moz-transform: rotate(-150deg);
    -moz-transform-origin: 50% 100%;
    transform: rotate(-150deg);
    transform-origin: 50% 100%;
}
#meter{
    height:170px;
    width:170px;
    -webkit-border-radius: 85px;
    -moz-border-radius: 85px;
    border-radius: 85px;
    position: absolute;
    top:120px;
    left:0;
    overflow: hidden;
    background: #00FF00;
    -webkit-transform: rotate(150deg);
    -webkit-transform-origin: 50% 50px;
    -moz-transform: rotate(150deg);
    -moz-transform-origin: 50% 50px;
    transform: rotate(150deg);
    transform-origin: 50% 50px;

}