餅圖：277deg餅需要什么CSS值

Question

我正在嘗試使用CSS創建此餅圖（在左側）。 我的嘗試在右邊：

我想要達到的目標在此處輸入圖片說明

我可以得到幾乎准確的信息，只是取出了正確的塊部分。 我需要什么餅形圖才能顯示僅277度的正確剪輯值？

我在CSS站點上閱讀到，該clip將來將能夠采用其他值而不是rect（但不確定該網頁的年齡），因此也許可以不使用clip：rect（..）; 我可以使用類似clip的東西：ellipse（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>

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 個解決方案

解決方案1
0 2012-01-23 01:20:56

餅圖：277deg餅需要什么CSS值

問題描述

1 個解決方案

解決方案1 0 2012-01-23 01:20:56

解決方案1
0 2012-01-23 01:20:56