How can I draw a custom circle shape in CSS3?

Question

I'm trying to draw this particular shape :

It has to have two straight faces, and I can't manage to create a better shape, other than a semicircle. Is it possible to somehow substract these portions from a circle with CSS, or should I just extract the image from the .psd file as it is ?

Answer 1

I have taken Tom answer and added overflow: hidden to the div.

This way, you don't need to set the div on the border of the body

CSS

#circle {
    position: relative;
    left: 40px;
    top: 40px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
#circle:after {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    display: block;
    content: '';
    position: absolute;
    top: -20px;
    left: -5px;
}

fiddle

Answer 2

Do it with css after property like so:

#circle {
    width: 100px;
    height: 100px;
}
#circle:after {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    display: block;
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
}

And in html:

<div id="circle"></div>

Answer 3

HTML

<div id="circle"> </div>

CSS

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

Output:

Working Fiddle

Updated CSS

  #circle {
    width: 400px;
    height: 400px;
    background: red;
    -webkit-border-top-left-radius: 80px;
    -webkit-border-top-right-radius: 100px;
    -webkit-border-bottom-right-radius: 200px;
    -webkit-border-bottom-left-radius: 200px;
    }

Check this in Chrome, Updated Fiddle

Output: