Html 把我的饼图变小有困难吗

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

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

这里是JSFiddle

HTML:

---

已经知道了，结果我不得不改变这个

.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; 
}

换句话说，将宽度和高度降低到我想要的值，然后将clip:rect（）中的第二个值编辑为宽度的一半，将第三个值编辑为高度的值。

---

然后将边框半径调整为宽度的一半。

您的解决方案将使图表变小，但如果您想使图表流畅，则将使用不同的方法。 我给你写了个密码笔。 只需将变量

$width

更改为所需的任何百分比值，然后单击顶部的眼睛即可查看已编译的css

---

您想让它响应吗？您可以调整这些值，或者使用padding hack。@KreaTief，最好是，是的。好的，我会给您写一个演示，应该是公平的simple@KreaTief哦，谢谢我还是这样，一直困扰着我：D

.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; 
}