CSSで扇形を描く方法は？

How Draw Circle Sector Css

解決：

CSSと複数の背景グラデーション

緑の部分を描画しようとするのではなく、代わりに白の部分を描画することができます。

パイ{ボーダー半径：50％;背景色：緑; } .ten {background-image：/ * 10％= 126deg = 90 +（360 * .1）* / linear-gradient（126deg、transparent 50％、white 50％）、linear-gradient（90deg、white 50％、透明50％）; }パイ{幅：5em;高さ：5em;表示ブロック;境界半径：50％;背景色：緑;ボーダー：2px無地の緑;フロート：左;マージン：1em; } .ten {background-image：linear-gradient（126deg、transparent 50％、white 50％）、linear-gradient（90deg、white 50％、transparent 50％）; } .twentyfive {background-image：linear-gradient（180deg、transparent 50％、white 50％）、linear-gradient（90deg、white 50％、transparent 50％）; } .fifty {background-image：linear-gradient（90deg、white 50％、transparent 50％）; } / *スライスが50％を超える場合は、最初のグラデーションを透明にする必要があります->緑* / .seventyfive {background-image：linear-gradient（180deg、transparent 50％、green 50％）、linear-gradient（90deg、white 50％ 、透明50％）; } .onehundred {background-image：none; }  デモ：http：//jsfiddle.net/jonathansampson/7PtEm/

 
  
 スケーラブルベクターグラフィックス
 オプションの場合は、SVGを使用して同様の効果を達成できますと要素。次のことを考慮してください。
 
 
   上記はかなり簡単です。円とパスを含む要素があります。円の中心は115x115にあります（SVG要素を230x230にします）。円の半径は110で、幅は合計220になります（境界線は10のまま）。
 次に、この例の最も複雑な部分である要素。この要素には、パスが描画される場所と方法を決定する1つの属性があります。次の値で始まります。
 M115,115これにより、パスは前述の円の中心から開始するように指示されます。次に、この場所から次の場所に線を引きます。
 
 
 L115,5これにより、円の中心から要素の上部まで垂直線が描画されます（まあ、上部から5ピクセル）。この時点で、物事はもう少し複雑になりますが、それでも非常に理解しやすくなります。
 現在の場所（115,5）から円弧を描きます。
 A110,110 1 0,1 190,35 zこれにより、円弧が作成され、円（110）の半径と一致する半径が与えられます。 2つの値はx半径とy半径を表し、円を扱っているため、どちらも同じです。重要な数字の次のセットは最後です、190,35。これは、アークにどこで完了するかを指示します。
 残りの情報については（10,1およびz）これらは、アーク自体の曲率、方向、および終端を制御します。オンラインのSVGパスリファレンスを参照することで、それらについて詳しく知ることができます。
 異なるサイズの「スライス」を実現するには、単に座標のより大きなまたはより小さなセットを反映するために190,35。 180度を超えてスパンする場合は、2番目の円弧を作成する必要がある場合があります。
 ある角度からx座標とy座標を決定する場合は、次の方程式を使用できます。
 x = cx + r * cos（a）y = cy + r * sin（a）上記の例では、76の次数は次のようになります。
 x = 115 + 110 * cos（76）y = 115 + 110 * sin（76）それは私たちに205,676,177,272。
 簡単に、次のものを作成できます。
 円{塗りつぶし：＃f1f1f1;ストローク：緑;ストローク幅：5; }パス{塗りつぶし：緑; } svg.pie {幅：230px;高さ：230px; }  デモ：http：//jsfiddle.net/jonathansampson/tYaVW/
  
  
それは非常によく使用して可能ですオーバーフローして複雑な計算を行うことなくプロパティを変換します。
 >回転変換
   180度未満の角度の場合  
  で要素を追加します アスペクト比2：1 とオーバーフロー：非表示;
 上部の境界線の半径が要素の高さと同じで、下部の半径が0の疑似要素を追加します。
 置く変換元：50％100％;これにより、疑似要素が中央下から変換されます。
 変換：rotate（）;必要な角度の補足による疑似要素、 
  NS 。、変換：rotate（180-rqrd。angle）;
 
 それがどのように機能するかを見てください：
  
   EG：   
この方法を使用した40度の扇形： フィドル  
 div {...オーバーフロー：非表示; ...} div：before {... border-radius：100px 100px 0 0;変換元：50％100％;変換：rotate（140deg）; ...}div {高さ：100px;幅：200px;オーバーフロー：非表示;位置：相対; } div：before {height：inherit;幅：継承;位置：絶対;コンテンツ： ''; border-radius：100px 100px 0 0;背景色：深紅色; -webkit-transform-origin：50％100％; -moz-transform-origin：50％100％; -ms-transform-origin：50％100％;変換元：50％100％; -webkit-transform：rotate（140deg）; -moz-transform：rotate（140deg）; -ms-transform：rotate（140deg）;変換：rotate（140deg）; }  >スキュー変換
   セクター内に画像を入れることもできます！  
 これは、親のスキュー変換と疑似要素の-veスキュー： 
  フィドル  
 div {...オーバーフロー：非表示;変換元：0％100％;変換：skew（-50deg）; / * rqrd角度の補数* / ...} div：before {... transform-origin：0％100％;変換：skew（50deg）; ...}これがどのように機能するかをご覧ください：
  
 div {高さ：200px;幅：200px;オーバーフロー：非表示; -webkit-transform-origin：0％100％; -moz-transform-origin：0％100％; -ms-transform-origin：0％100％;変換元：0％100％; -webkit-transform：skew（-50deg）; -moz-transform：skew（-50deg）; -ms-transform：skew（-50deg）;変換：skew（-50deg）; / * rqrd角度または（90-角度）の補数* /位置：相対; } div：before {height：inherit;幅：継承;位置：絶対;コンテンツ： ''; border-radius：0 200px 0 0;背景：url（ 'http://www.placekitten.com/g/300/200/'）; -webkit-transform-origin：0％100％; -moz-transform-origin：0％100％; -ms-transform-origin：0％100％;変換元：0％100％; -webkit-transform：skew（50deg）; -moz-transform：skew（50deg）; -ms-transform：skew（50deg）;変換：skew（50deg）; }  
   謝辞 ：私はセルフスティーラーになりたくありません。以前こことここで使用したアイデアを使用しました。
  
これは役に立ちますか？
 .circle {幅：16em;高さ：16em;境界半径：50％;背景：linear-gradient（36deg、＃272b66 42.34％、transparent 42.34％）0 0; background-repeat：no-repeat;背景サイズ：50％50％; }    ワーキングフィドル  
 実際、ここではいくつかのジオメトリ計算が必要です。しかし、簡単に説明させてください。
 円の4つの四分の一を考慮すると、線形勾配の角度は各四分の一で計算できます。そしてそのbackground-positionが四半期を決定します。
 Q = 1> 0 Q 2 = 100％> 100％100％Q = 3> 0 100％Q 4 => 0 0残っているのは使用済みの場所だけです カラーストップ から来ました：
 考えてみてください 30角 の円の一部 第1四半期 。
 才能として アナチューダー 彼女の中で説明しました 素晴らしい記事 、正方形の幅の長さをaの場合、対角線の半分の長さは次のようになります。a * sqrt（2）/ 2。
 勾配度を次のようにするとg2つの勾配角と対角線の差がd次にの長さカラーストップは次の方法で計算できます。
 a * sin（g）/（a * sqrt（2）/ 2 * cos（d））= sin（g）/（sqrt（2）/ 2 * cos（d））したがって、この場合、sin（30deg）/（sqrt（2）* cos（（45-30）deg））= 0.3660、カラーストップの％値は36.60％
 私たちの形は第1四半期なので、背景位置は100％0。
 線形勾配は次のようになります このような ：
 線形グラデーション（-30度、オレンジ36.60％、透明36.60％）100％0;.circle {幅：16em;高さ：16em;境界半径：50％;背景：線形勾配（-30度、オレンジ36.60％、透明36.60％）100％0; background-repeat：no-repeat;背景サイズ：50％50％; }  詳細については、Anaの記事を読むことをお勧めします。