Question

我使用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);
}

Answer 1

您的解决方案会使图表变小，如果您想使图表流畅，您将使用不同的方法。我写了一个关于它的codepen。只需将变量$width更改为您想要的任何百分比值，然后单击顶部的眼睛以查看已编译的CSS。

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

Answer 2

已经知道了，结果我只需要改变它;

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

进入这个：

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

换句话说，降低宽度＆amp;高度到我想要的任何值，然后编辑剪辑中的第二个值：rect（）到宽度的一半，第三个值到高度值。然后边界半径为宽度的一半。

麻烦使我的饼图变小

2 个答案: