gpt4 book ai didi

html - 无法缩小我的饼图

转载 作者:太空宇宙 更新时间:2023-11-04 12:43:46 25 4
gpt4 key购买 nike

我只使用 HTML5 和 CSS3 创建了一个饼图,而且效果很好。然而,问题是我把馅饼做得太大了。

我想要的是馅饼的大小约为当前大小的 50% - 75%。我应该怎么做?

这是 JSFiddle; LINK

HTML:

<body>
<div>
<div id="PieChartLeft">
<div class="pie"></div>
</div>
<div id="PieChartLeftValue">
<div class="pie"></div>
</div>
</div>

CSS:

.pie {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}

#PieChartLeft, #PieChartLeftValue {
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
transform:rotate(270deg);
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
left:300px;
}

#PieChartLeft .pie {
background-color:salmon;
border-color:salmon;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}

#PieChartLeftValue .pie {
background-color:grey;
border-color:grey;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}

最佳答案

您的解决方案将使图表变小,但如果您想让图表流畅,您将使用不同的方法。我给你写了一篇关于它的代码笔。只需将变量 $width 更改为您想要的任何百分比值,然后单击顶部的眼睛即可查看编译后的 css。

http://codepen.io/bekreatief/pen/liHBs

关于html - 无法缩小我的饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26670899/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com