How to make circular background using css?

Question

I need make something like this. and I want to do it for a <div></div> which has width in %

I can do this by using an image and adding another div inside and z-index.

But I want to know if it's possible to make in this circle in backgroud using css.

Answer 1

Keep it simple:

.circle   {     border-radius: 50%;     width: 200px;     height: 200px;    } 

Width and height can be anything, as long as they're equal

Answer 2

Check with following css. Demo

.circle {     width: 140px;    height: 140px;    background: red;     -moz-border-radius: 70px;     -webkit-border-radius: 70px;     border-radius: 70px; } 

For more shapes you can follow following urls:

http://davidwalsh.name/css-triangles