円グラフ：277度円にはどのようなCSS値が必要ですか

私はこの円グラフ（左）をCSSを使って作成しようとしています。私の試みは、右側にある：円グラフ：277度円にはどのようなCSS値が必要ですか

What I want to achieve enter image description here

私が取り出されて、正しいチャンク部分を除いて、ほぼ正確にそれを得ることができます。 円グラフに277度しか表示されない場合、正しいクリップ値は何ですか？

私は、将来的にはrectの代わりに他の値をとることができるというCSSサイトを読んでいます（ウェブページの長さはわかりません）。clip：rect（..）;私はclip：ellipse（277deg）のようなものを使うことができます。？

また、境界線がチャンクの内側に表示されていないため、これを表示できるCSS方式がありますか？ここで

はJSFiddleです：の上に作品を置く

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

出典

2012-01-09 Jake M

あなたは、SVGを言及していないあなたはそれを考慮し、それを支配してきましたか？ – bennedich

@bennedich SVGそれでは、まさにあなたは例へのリンクを持っていますか？ –

SVGはXML形式で表現されたスケーラブルベクターグラフィックスです。現代のブラウザでは、SVGをHTMLの中に埋め込み、Javascriptでアニメーション化することができます。例：http://jsfiddle.net/QbRFf/ – bennedich

あなたが任意の根底にある円を描画しなければならないのいずれかが50％を超えるCSSのパイを作るために：ここでhttp://jsfiddle.net/8LecX/1/

が簡単なコードですクリップを取り除き、2番目のピースをフィラーとして追加する必要があります。私は第2の選択肢を使用することに決めました。ここで

はこれがどのように行われるかの例です：

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

出典

2012-01-23 01:20:56

円グラフ：277度円にはどのようなCSS値が必要ですか

答えて

関連する問題