Segmenty kołowe za pomocą CSS/CSS3

Question

Czy istnieje jakikolwiek wariant do rysowania segmentu kołowego za pomocą samego CSS/CSS3.

Segment Circular - http://en.wikipedia.org/wiki/Circular_segment (muszę, że zielona część okręgu)

Próbowałem to:

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

Ale to nie wygląda kołowego segmentu.

Answer 1

Szerokość i wysokość div powinien być taki sam produkować krąg.
np http://jsfiddle.net/wGzMd/

Oto css:

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

---

EDIT (dla segmentu):

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; 
} 

HTML:

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

Answer 2

Pół koła: 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

Hey sprawdzić na tej stronie http://css-tricks.com/examples/ShapesOfCSS/

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

i to

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> 

demo żywo http://jsfiddle.net/carTT/

i stworzyć dowolny kształt w czystym CSS jak jak ty .................