Circle segment using CSS / CSS3

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

Circle with a dashed line across the top. The section within the line, the segment, is shaded green and labeled 'c'. Radius, segment height, etc. are also labeled.

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.

+8
css css3 segment circular
source share
3 answers

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> 
+6
source share

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 .................

+4
source share

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;} 
+3
source share

All Articles