Making part of a div transparent

Question

I\'m trying to do something like this in HTML. It\'s a header, at the very top of the page. T

Answer 1

EDIT: extended my demo with the help of @yentups posted fiddle again.

I played around a bit with radiant gradients and came up with the following. You have to play around a bit and get used to the syntax of radial gradients. It's late for me now, I won't wrap my head around this now. Good luck!

Demo: http://jsfiddle.net/5VDLX/

HTML:

CSS:

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

• Browser support for CSS3 gradients http://caniuse.com/#feat=css-gradients
• Browser support for CSS3 background-image options http://caniuse.com/#feat=background-img-opts