饼图：277deg饼需要什么CSS值
[英]Pie Chart: What CSS value is required for a 277deg pie
问题描述
I am trying to create this pie graph(on the left) using CSS. 
我正在尝试使用CSS创建此饼图（在左侧）。 My attempt is on the right: 我的尝试在右边：
I can get it almost exact except for the correct chunk portion being taken out. 我可以得到几乎准确的信息，只是取出了正确的块部分。 What are the correct clip values I need to get the pie chart to show only 277 degrees? 我需要什么饼形图才能显示仅277度的正确剪辑值？
I read on the CSS site that clip will be able to take other values instead of rect in the future(no sure how old the webpage was though) so maybe instead of using clip: rect(..); 我在CSS站点上阅读到，该clip将来将能够采用其他值而不是rect（但不确定该网页的年龄），因此也许可以不使用clip：rect（..）; I can use something like clip: ellipse(277deg); 我可以使用类似clip的东西：ellipse（277deg）; ? ？
Also the border is not showing for the inside of the chunk, is there a CSS way I can get this to show? 此外，块的内部没有显示边框，有没有一种CSS方法可以显示此内容？
Here is the JSFiddle: http://jsfiddle.net/8LecX/1/ 这是JSFiddle： http : //jsfiddle.net/8LecX/1/
Here is the simple code: 这是简单的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.myPie {
position:absolute;
width:200px;
height:200px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
clip:rect(0px,100px,200px,0px);
/*-moz-transform:rotate(109.44deg);
-webkit-transform:rotate(109.44deg);
-o-transform:rotate(109.44deg); */
background-color: RGB(0,153,255);
border: solid 3px RGB(221,255,100);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="myPie">
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
0 2012-01-23 01:20:56
To make pies in css above 50% you must either draw an underlying circle any lay the pieces on top of it or you must remove the clip and add a second piece as a filler. 要使css中的饼超过50％，您必须绘制一个基础圆圈，或者在其上方放置碎片，或者必须移除该夹并添加第二个碎片作为填充物。 I've elected to use the second option. 我选择使用第二个选项。
Here is an example of how this is done: 这是一个如何完成此操作的示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.hold {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
left:300px;
}
.pie {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
.hold.gt50 {
clip:rect(auto, auto, auto, auto);
}
.pie.fill {
-moz-transform:rotate(180deg) !important;
-webkit-transform:rotate(180deg) !important;
-o-transform:rotate(180deg) !important;
transform:rotate(180deg) !important;
}
#data1 {
margin-left:10px;
margin-top:10px;
}
#data1 .pie {
background-color:blue;
border-color:blue;
-moz-transform:rotate(277deg);
-webkit-transform:rotate(277deg);
-o-transform:rotate(277deg);
transform:rotate(277deg);
}
</style>
</head>
<body>
<div id="data1" class="hold gt50">
<div class="pie"></div>
<div class="pie fill"></div></div></body></html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.