CSS3 Moon Eclipse shape

Question

How can I make the following shape in CSS3, without using pseudo-classes like ":before"?

I did it very easy with :before, but the thing is that I don't want to have a solid element on the gray area (see JSFiddle - http://jsfiddle.net/aUdLr/2/)

div{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 100%;
    position: relative;
}
div:before{
    content: "";
    width: 100%;
    height: 110%;
    background: gray;
    position: absolute;
    left: 5px;
    top: -5%;
    border-radius: 100%;
}

Answer 1

To get the effect of a small circle eclipsed by a larger circle, you can add a shadow to a transparent element:

div{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color:transparent;
    box-shadow: -23px 0 0px -15px #ff8;
}

Example: http://jsfiddle.net/aUdLr/6/

Answer 2

Simplest CSS3 solution that comes to my mind:

div:before {
    font: 80px serif;
    color: red;
    content: "(";
}

Here's a fiddle.

(Now seriously- if you want a good amount of control over the shape, I suggest to use SVG.)