CODEWITHSUNDEEP
javascripthtmlcss
Pav Sidhu
Pav Sidhu

Reputation: 6954

Outlining a circular element with CSS

I have a circle which is created with the following styling:

.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

I would like to have an outline around this circle, however, I would like it to only be around part of the circle to produce a percentage.

For example:

As the width and height and defined, I could go about this by creating a circle in the same position which is slightly larger to create an outline, though I would not know how to create the 'pie' shape.

I would also like to be able to support as many browsers as possible.

Thanks in advance.

Upvotes: 6

Views: 291

Answers (1)

connexo
connexo

Reputation: 56783

Basically, you use any library capable of generating a piechart, then you place a circle inside the pie chart matching your page's (or element's) background-color right on it so it looks like a donut (actually a donut chart is what you are looking for). Of course you use only two fragments for your application.

https://github.com/azagniotov/pielicious

enter image description here

Addon to http://raphaeljs.com/

Works flawlessly even on IE8.

I adapted this as a custom binding in my current project. This is what the result looks like:

enter image description here

Upvotes: 7

Related Questions