麻烦让我的饼图更小

我已经创建了一个只使用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); 
}

来源

2014-10-31 Yen

您是否希望此功能得到响应？你可以调整值，或使用填充黑客。 – KreaTief 2014-10-31 09:11:04

@KreaTief，最好是。 – Yen 2014-10-31 09:11:30

好的，我会给你写一个demo，应该相当简单 – KreaTief 2014-10-31 09:12:06

已经知道了，原来我只是不得不改变这一点;

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

换言之，降低了宽度&高度任何我想要，然后编辑在剪辑中的第二个值：）矩形（与宽度和一半高度值的第三个值。然后将边界半径改为宽度的一半。

来源

2014-10-31 09:34:45 Yen

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

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

来源

2014-10-31 10:13:01 KreaTief

麻烦让我的饼图更小

回答

相关问题