CSS/CSS3を使用する円弧セグメント

Question

CSS/CSS3だけを使用して円弧セグメントを描画する方法はありますか。

div{ 
width:86px; 
height:22px; 
background-color:green; 
border-bottom-right-radius: 42px; 
border-bottom-left-radius: 42px;} 

をしかし、それは、円形のセグメントのようにしていません： -

円形セグメントhttp://en.wikipedia.org/wiki/Circular_segment

私はこれをしようとしていた（私はサークルの緑の部分があること必要があります）。

Answer 1

div要素の幅と高さは、円を生成するために同じである必要があります。
例：

div{ 
position: absolute; 
top: 50px; 
left: 50px; 
width:100px; 
height:100px; 
border: 1px solid green; 
background: green; 
border-radius: 360px; 
} ​ 

---

EDIT（セグメント用）：

http://jsfiddle.net/wGzMd/3/

CSS：

div.outerClass{ 
position: absolute; 
left: 50px; 
top: 50px; 
height: 25px; 
overflow: hidden; 
} 

div.innerClass{ 
width:100px; 
height:100px; 
border: 1px solid green; 
border-radius: 360px; 
} 

ここ http://jsfiddle.net/wGzMd/

は、CSSです

HTML：

<div class="outerClass"><div class="innerClass"></div></div> 

Answer 2

ハーフサークル： http://www.paulund.co.uk/how-to-create-different-shapes-in-css

div { 
height:45px; 
width:90px; 
border-radius: 0 0 90px 90px; 
-moz-border-radius: 0 0 90px 90px; 
-webkit-border-radius: 0 0 90px 90px; 
background:green;} 

Answer 3

ねえ、このサイトにhttp://css-tricks.com/examples/ShapesOfCSS/

このhttp://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/

この

http://www.css3shapes.com/

をご確認のCss

#oval { 
width: 86px; 
height: 22px; 
background: green; 
-moz-border-radius: 50px/25px; 
border-radius: 100px 100px 0 0/47px; 
-webkit-border-radius: 100px 100px 0 0/47px; 
} 

HTML

<div id="oval"></div> 

ライブデモhttp://jsfiddle.net/carTT/

とあなたのような純粋なCSSの任意の形状を作成する.................