How can I make a semicircle thinner and with a smaller width? - html

Question

I'm trying to modify an existing css and make the semi-circle with the #E9EEF2 color thinner and shorter in width, but without any luck. So far everything I did was breaking the shape.
This is what I have so far as HTML:
.content {
display: flex;
}
.mask {
position: relative;
overflow: hidden;
display: block;
width: 12.5em;
height: 6.25em;
margin: 1.25em;
}
.semi-circle {
position: relative;
display: block;
width: 12.5em;
height: 6.25em;
background: #A148F7;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 8.75em;
height: 4.375em;
margin-left: -4.375em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle--mask {
position: absolute;
top: 0;
left: 0;
width: 12.5em;
height: 12.5em;
background: transparent;
transform: rotate(120deg) translate3d(0, 0, 0);
transform-origin: center center;
backface-visibility: hidden;
transition: all .3s ease-in-out;
}
.semi-circle--mask::before {
content: "";
position: absolute;
top: 0;
left: 0%;
z-index: 2;
display: block;
width: 12.625em;
height: 6.375em;
margin: -1px 0 0 -1px;
background: #DBDBDB;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.gauge--1 .semi-circle {
background: #A148F7;
}
<section class="content">
<div class="box gauge--1">
<div class="mask">
<div class="semi-circle"></div>
<div class="semi-circle--mask"></div>
</div>
</div>
</section>
You can find it in jsfiddle as well.
I know that I'm missing a small, but an important piece here, so please, give me a push, since I really have no idea how to modify the CSS
in order to keep the current shape.

Answer 1

To make the ring thinner, you need to increase the size of the inner semicircle that hides part of the outer semicircle making it look like a ring. I.e. modify the width, height, and negative left margin of .semi-circle::before.
To make the whole thing smaller, you need to decrease the width and height of all .mask, .semi-circle, .semi-circle--mask, and .semi-circle--mask::before. And then of course change the smaller semicircle too as mentioned above to fit the new size and your desired thickness of the ring.
Note that all heights should be half of the width of the same element. And the left margin of the .semi-circle::before should be negative half of the width of the same element.
Example with an 8em-wide gauge and a slightly thinner ring:
.content {
display: flex;
}
.mask {
position: relative;
overflow: hidden;
display: block;
width: 8em;
height: 4em;
margin: 1em;
}
.semi-circle {
position: relative;
display: block;
width: 8em;
height: 4em;
background: #A148F7;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 6em;
height: 3em;
margin-left: -3em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.semi-circle--mask {
position: absolute;
top: 0;
left: 0;
width: 8em;
height: 8em;
background: transparent;
transform: rotate(120deg) translate3d(0, 0, 0);
transform-origin: center center;
backface-visibility: hidden;
transition: all .3s ease-in-out;
}
.semi-circle--mask::before {
content: "";
position: absolute;
top: 0;
left: 0%;
z-index: 2;
display: block;
width: 8em;
height: 4em;
margin: -1px 0 0 -1px;
background: #DBDBDB;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}
.gauge--1 .semi-circle {
background: #A148F7;
}
<section class="content">
<div class="box gauge--1">
<div class="mask">
<div class="semi-circle"></div>
<div class="semi-circle--mask"></div>
</div>
</div>
</section>

Answer 2

By modifying
.semi-circle::before {
...
width: 8.75em;
height: 4.375em;
margin-left: -4.375em;
...
}
This block sets up the bright half disk in the middle, so if you make that bigger, the outer "gauges" get thinner.

Answer 3

you can make the semicircle thinner if you increase the size of the inner semicircle:
.semi-circle::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
z-index: 2;
display: block;
width: 10.75em;
height: 5.375em;
margin-left: -5.375em;
background: #E9EEF2;
border-radius: 50% 50% 50% 50%/100% 100% 0% 0%;
}