The above image is what i'm trying to create but am having some difficulties with the oval shape. An explanation:

The menu bar is a div with a slight linear gradient (dark grey to transparent lighter grey)
The company logo image has a transparent bg and will sit 'ontop' of the menu bar
The oval cutout will need to match the oval of the logo and have a transparent gap between that will show the background colour (this changes on each page, orange is just an example)

I've tried and failed many times with a radial gradient - I was able to get a circle cut out but couldn't work out how to make it oval and then couldn't get the linear gradient to work. See code:

.circle {
    height: 10em;
    background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
    background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
}

When the cutout shape and the gradient is sorted, the logo will be positioned over the top.

Any suggestions or jsfiddle solutions would be appreciated, thanks!

EDIT: jsfiddle here

EDIT 2: Have solved the problem by changing the design slightly, thanks to those who replied. I wrote some jquery to solve this - when the coloured area scrolls out of view the oval border and header border will pick up the colour of the top section, instead of the transparency.

You can start from this Running Demo

Note: I've added a small animation to change the background color just to clear that the space between the island and the div with the cutout is really transparent.

HTML

<div class="cutout">
    <div class="island">
        <div id="circleText">Circle Text </div>
    </div>
</div>

CSS

.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px 150px at 50% 100%, 
                                transparent 100px, #555 50px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px 150px at 50% 50%, 
                                silver 90px, rgba(0, 0, 0, 0) 50px);
    height: 10em;
}
.island > div {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 30px;
    bottom: 30px;

    background: rgba(fff, 0, 0, 0.2);
    padding: 5px;    
    text-align: center;    
}

#circleText {
    padding-top: 30px;
    font-size: 1.5em;
}

Try this one:

background: radial-gradient(ellipse at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);

jsfiddle here

Try this: http://css-tricks.com/the-shapes-of-css/

position it absolutely on top of the other parts of the menu

You could do something like this:

.container{
    height: 10em;
    background: #76757e;
}

.ovalCutout{
    background:white;
    height:50px;
    width:100px;
    border-radius:50%;
    margin:0px auto;
    position:relative;
    top:120px;
}

http://jsfiddle.net/UwXKu/

You can do it making a composite of 3 backgrounds, the center one radial and the side ones linear.

It's difficult however to make the 2 kind of gradients match exactly; it will be only doable if the gradient is very smooth.

.back {
    height: 100px;
    width: 1000px;
    padding: 0px;
    background-image: radial-gradient(200px 100px ellipse at 50% 100%, transparent 70px, 
               rgba(100, 100, 100, 0.8) 73px, 
               rgba(80, 80, 80, 1) 198px), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8)), 
    linear-gradient(180deg, rgb(80, 80, 80), rgba(100, 100, 100, 0.8));
    background-size: 200px 100px, 40% 100%, 40% 100%;
    background-repeat: no-repeat;
    background-position-x: 50%, 0%, 100%;
    background-position-y: 100%;
}

demo

来源：https://stackoverflow.com/questions/18830868/css-oval-shape-cut-out-from-div

标签

jquery

html

css

css3

css-shapes

CSS oval shape cut out from div

demo