Transparent half circle cut out of a div

Question

I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must

Answer 1

You can do it really easily with a radial gradient.

DEMO

Result:

HTML:

Relevant CSS:

.shape {
  margin: 0 auto;
  width: 10em; height: 16em;
  /* WebKit browsers, old syntax */
  background: -webkit-radial-gradient(50% 0, circle, transparent 30%, black 30%);
  
  /* IE10, current versions of Firefox and Opera */
  background: radial-gradient(circle at 50% 0, transparent 30%, black 30%);
}

See http://caniuse.com/#feat=css-gradients for detailed info on compatibility.