Circular segment using CSS/CSS3

css

Solution

The width and height of the div should be same to produce a circle. eg: 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>

Problem

Is there any variant to draw a circular segment using just CSS/CSS3? I need that green part of circle. I was trying this: ``` div { width: 86px; height: 22px; background-color: green; border-bottom-right-radius: 42px; border-bottom-left-radius: 42px; } ``` ``` <div></div> ``` But it doesn't look like a circular segment.

Original source