Question

我正在尝试使用CSS创建这个饼图（在左侧）。我的尝试是在右边：

What I want to achieve enter image description here

除了正确的块部分被取出外，我几乎可以得到它。 饼图仅显示277度所需的正确剪辑值是多少？

我在CSS网站上看到，剪辑将来可以采用其他值而不是rect（不知道网页有多大），所以也许不使用 clip：rect（..）; 我可以使用类似剪辑：椭圆（277deg）; 的内容？

边框没有显示在块内部，是否有CSS方式我可以显示它？

以下是简单的代码：

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

Answer 1

要使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值

1 个答案: