CSS oval shape cut out from div

问题:

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.

回答1:

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;
}

回答2:

Try this one:

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

jsfiddle here

回答3:

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

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

回答4:

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/

回答5:

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