Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Circular segment using CSS/CSS3

Tags:

css

Is there any variant to draw a circular segment using just CSS/CSS3?

Circle with a dashed line across the top. The section within the line, the segment, is shaded green and is less than half of the cirle. Radius, segment height, etc. are also labeled.

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.

like image 464
Maryna Avatar asked Apr 25 '12 10:04

Maryna


People also ask

Can you create a circle using CSS?

To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.

How do I make an arc in CSS?

CSS Shapes It's possible to draw circles and arcs in CSS by simply creating a square <div> and setting border-radius to 50%. Each side of the border can take a different color or can be set to transparent . The background-color property sets the shape's fill, if any.


2 Answers

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>
like image 57
Ankit Avatar answered Sep 23 '22 00:09

Ankit


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

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

and this

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 as like you .................

like image 43
Rohit Azad Malik Avatar answered Sep 21 '22 00:09

Rohit Azad Malik