饼图：277deg饼需要什么CSS值

问题描述：

我想用CSS创建这个饼图（在左边）。我的尝试是正确的：饼图：277deg饼需要什么CSS值

What I want to achieve enter image description here

我可以得到几乎确切除了正确的大块部分被取出。 什么是正确的剪辑值，我需要让饼图只显示277度？

我的CSS网站读取剪辑将可以采取其他值，而不是矩形在未来（没有确定网页多大年纪虽然）的，所以也许不是使用剪辑：矩形（..）;我可以使用像剪辑：椭圆（277deg）;？

此外，边界不是显示块的内部，有没有CSS的方式，我可以得到这显示？

这里是的jsfiddle：http://jsfiddle.net/8LecX/1/

下面是简单的代码：

<!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>

您还没有提到SVG，你认为它和排除它呢？ – bennedich 2012-01-09 01:53:46

@bennedich SVG什么是你有一个链接到一个例子？ – 2012-01-09 03:31:16

SVG是以XML格式表示的Scalable Vector Graphics。在现代浏览器中，SVG可以嵌入HTML内部并用Javascript进行动画。例如：http://jsfiddle.net/QbRFf/ – bennedich 2012-01-09 04:18:11

答

为了让馅饼在CSS 50％以上，则必须绘制一个底层圈中的任何躺在上面件它或者你必须删除剪辑，并添加第二块作为填充。我选择使用第二个选项。

这里是如何做到这一点的例子：

<!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>

饼图：277deg饼需要什么CSS值

相关推荐