Could someone please help me with resizing the circle border in this code? I am facing difficulties adjusting the size and would appreciate any assistance. By running the code snippet, you can see the issue I am encountering and how it differs from the provided image. The code involves using CSS in HTML to customize a graph. While attempting to change specific parts of the graph's size, I realized that customization was limited. Is it possible to fully customize the graph using CSS?
body{
background: darkturquoise;
}
.circle-sector {
overflow: hidden;
width: 150px;
height: 75px;
transform-origin: 50% 100%;
position: absolute;
}
.circle {
margin-top:18px;
margin-left:5px;
width: 90px;
height: 60px;
border-radius: 60px 60px 0 0;
background: #00aaad ;
transform-origin: 50% 100%;
transform: rotate(90deg);
}
.center {
width: 80px;
height: 80px;
margin-left: 10px;
background: darkturquoise;
border-radius: 50%;
margin-top: 60px;
transform: rotate(0deg);
position: absolute;
}
.another-circle {
width: 100px;
margin-left: 0px;
height: 50px;
margin-top: 0px;
border-radius: 50px 50px 0 0;
background: white;
transform-origin: 50% 100%;
transform: rotate(0deg);
}
.another-circle1 {
margin-top: 10px;
margin-left: 30px;
width:120px;
height: 80px;
border-radius: 20px 30px 0 0;
background: gray ;
transform-origin: 50% 100%;
transform: rotate(-100deg);
}
.another-circle2 {
margin-top:0px;
margin-left: 0px;
width: 90px;
height: 45px;
border-radius: 45px 50px 0 0;
background: black ;
transform-origin: 50% 100%;
transform: rotate(-145deg);
} <div class="circle-sector" style="transform: rotate(0deg);">
<div class="circle"></div>
</div>
<div class="circle-sector" style="transform: rotate(-90deg);">
<div class="another-circle"></div>
</div>
<div class="circle-sector" style="transform: rotate(180deg);" >
<div class="another-circle1"></div>
</div>
<div class="circle-sector" style="transform: rotate(250deg);" >
<div class="another-circle2"></div>
</div>
<div class="center"></div>