How to make circular background using css?

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.

Solution 1:

Keep it simple:

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

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

Solution 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