想要使用 css 和 html 创建此图
Want create this graph using css and html
我已经尝试过此代码,但在更改圆形边框的大小时遇到 size.Facing 问题,所以请帮助我解决此代码段中的 problem.Run 代码,我会知道我遇到了什么问题并且它应该看起来像我给的图像。
这是在 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>
我建议在 <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>
我已经尝试过此代码,但在更改圆形边框的大小时遇到 size.Facing 问题,所以请帮助我解决此代码段中的 problem.Run 代码,我会知道我遇到了什么问题并且它应该看起来像我给的图像。 这是在 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>
我建议在 <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>