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

You can use border width:

div{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border-width: 0;
    border-left:solid 10px red;
}

Scientifically inaccurate example: http://jsfiddle.net/aUdLr/4/

Keep in mind that the outer shape is not a perfect circle, because the border is added to the width. You can compensate by reducing the width, or by using Box-sizing: Border-box.

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.)

Answer 3

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/