要使用css和html创建此图

Question

我已经尝试过此代码，但是遇到大小问题。在更改圆形边框的大小时遇到​​问题，因此请帮助我解决此问题。在代码段上运行代码，将知道我遇到了什么问题，应该看起来像我给的图像。这是在HTML中使用CSS的代码。如何自定义图形。通过在html中使用css来使图形各部分发生特定的大小更改，但是无法自定义图形。如何自定义。可以在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>

Answer 1

我建议在<SVG>中重画圆圈。根据需要调整stroke-width，stroke-dasharray和stroke-dashoffset。