I searched throughout stackoverflow for this but the thing is, there exist several answers which explain how to do so however it turns out that none of those answers really achieve the actual goal. The output does look like a semi circle but it isn't a perfect semicircle. Allow me to explain, I ran the equation of circle and moved something across the semi circle however near the top of the shape, my object deviates but does in fact overlap the shape on the left and right ends. See the three images below
My css is below:
slider {
width: 75%;
border-right: solid 0.2vw;
border-left: solid 0.2vw;
border-top: solid 0.2vw;
border-bottom-color: transparent;
border-bottom: hidden;
border-bottom: none;
border-left-color: white;
border-right-color: white;
border-top-color: white;
position: relative;
border-top-left-radius: 37.7vw; /*keeping in mind the 0.2vw width*/
border-top-right-radius: 37.7vw; /*100% 200%*/
display: inline-block;
padding-top: 37.5%;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
Seemingly, this should be enough information to come up with a solution but if you want to read further, feel free to.
I need my shape to be responsive which can be inferred through the css I have written. I am preserving the shape by fixing its aspect ratio through the padding hack. My html is below:
<holder>
<slider style="top: 25%; left: 50%; transform: translate(-50%,-25%);" id="sliderx" class="slider"></slider>
<img style="width:13%; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-45%); opacity:0;" src="~/Assets/Images/SomeImageThatIHaveNotShownInMyScreenshots.png" />
</holder>
Although I believe I have provided sufficient information and it is unnecessary to show holder's css or my function which moves the blue ball in a circle but I am still posting them below: (Not very relevant [Feel free to skip])
holder {
grid-row: span 20;
display: block;
position: relative;
background-image: linear-gradient(rgba(52, 64, 122, 0.3), rgba(53, 63, 121, 0.3));
padding: 0%;
}
holder:hover {
background-image: linear-gradient(rgba(52, 64, 122, 0.5), rgba(53, 63, 121, 0.5));
}
The holder exists within another element whose css is: (Not very relevant [Feel free to skip])
divm {
position: relative;
height: 100%;
z-index: 2;
grid-column: span 30;
overflow-y: auto;
display: grid;
grid-template-rows: repeat(41, 1fr);
padding: 0px;
}
My function is: (Not very relevant [Feel free to skip])
function adjuster(coordinatex) {
var x, y, xc, yc, r;
var leftgap = document.getElementById("sliderx").getBoundingClientRect().left - document.getElementById("holder").getBoundingClientRect().left;
var topgap = document.getElementById("sliderx").getBoundingClientRect().top - document.getElementById("holder").getBoundingClientRect().top;
var widthen = document.getElementById("sliderx").getBoundingClientRect().width;
r = (widthen / 2) - ($("#sliderx").css("border-left-width").replace(/[^-\d\.]/g, '') / 2);
xc = leftgap + (widthen / 2);
yc = topgap + (widthen / 2);
x = coordinatex;
y = (-1 * Math.pow((-1 * Math.pow((x - xc), 2)) + (Math.pow(r, 2)), 0.5)) + yc;
document.getElementById("knob").style.left = x - (document.getElementById("knob").getBoundingClientRect().width / 2);
document.getElementById("knob").style.top = y - (document.getElementById("knob").getBoundingClientRect().height / 2);
}
All I want is to make a perfect scalable and responsive semi circle. I cannot use an image and maintain the aspect ratio because as the ball moves on the semi circle, i want to change the color of the semicircle to blue to show the covered region. I can easily do it by color covered parts of the box border. I am looking forward to a fix in my current work (the box-border method) as most of my code revolves around it right now. I know other methods like svg or using a picture and painting it can work but the box border method seems simple.
