Circle segment using CSS / CSS3

Question

Is there an option to draw a circular segment using only CSS / CSS3?

I need this green part of the circle.

I tried this:

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

 <div></div> 

But this does not look like a circular segment.

Answer 1

The width and height of the div must be the same to create a circle.
for example: http://jsfiddle.net/wGzMd/

Here is the css:

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

---

EDIT (for segment):

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

Hey check out this site http://css-tricks.com/examples/ShapesOfCSS/

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

and this one

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> 

Live demo http://jsfiddle.net/carTT/

and create any shape in pure css like you .................

Answer 3

Half circle: 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;}