想要使用 css 和 html 创建这个图

Question

我已经尝试过这段代码，但遇到了大小问题。在更改圆形边框的大小时遇到​​问题，所以请帮我解决这个问题。在 sn-p 上运行代码，就会知道我有什么问题，应该看看就像我给出的图像一样。 这是在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。

body {
  background-color: darkturquoise;
}
svg {
  width: 200px;
  height: 200px;
}
circle {
  fill: none;
  stroke-linecap: butt;
  transform: rotate(-86deg);
  transform-origin: center;
  
  animation-name: drawCircle;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.circle1 {
  stroke-dasharray: 330;
  stroke-dashoffset: 0;  
  stroke-width: 10px;
  stroke: #fff;
  z-index: 4;
}
.circle2 {
  stroke-dasharray: 330;
  stroke-dashoffset: 250;  
  stroke-width: 30px;
  stroke: #00aaad;
  z-index: 3;
}
.circle3 {
  stroke-dasharray: 330;
  stroke-dashoffset: 200;;  
  stroke-width: 30px;
  stroke: grey;
  z-index: 2;
}
.circle4 {
  stroke-dasharray: 330;
  stroke-dashoffset: 150;  
  stroke-width: 20px;
  stroke: black;
  z-index: 1;
}

<svg>
  <circle class="circle1" r="50" cx="100" cy="100"></circle>
  <circle class="circle4" r="50" cx="100" cy="100"></circle>
  <circle class="circle3" r="50" cx="100" cy="100"></circle>

  <circle class="circle2" r="50" cx="100" cy="100"></circle>


</svg>