Oval CSS cut from div

Question

The above image is what I am trying to create, but I have some difficulties with the oval shape. Explanation:

• The menu bar is a div with a slight linear gradient (from dark gray to transparent light gray)
• The company logo has transparent bg and will sit 'ontop' in the menu bar
• The oval cut should correspond to the oval of the logo and have a transparent gap between the one that will display the background color (this is a change on each page, orange is just an example).

I tried and failed many times with a radial gradient - I managed to cut a circle, but could not figure out how to make it oval, and then could not 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 gradient are sorted, the logo will be located on top.

Any suggestions or jsfiddle solutions would be appreciated, thanks!

EDIT: jsfiddle here

EDIT 2: Solved the problem by slightly changing the design, thanks to those who answered. I wrote some jquery to solve this problem - when the color area scrolls out of the field of view, the border of the oval border and the title will pick up the color of the top instead of transparency.

Answer 1

You can start with this Running Demo

Note. I added a little animation to change the background color just to clear the space between the island and the clipping div. It is truly 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; } 

Answer 2

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

place it completely on top of other parts of the menu

Answer 3

You can 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/

Answer 4

You can do this by creating a composition of three backgrounds, central radial and side linear.

It is difficult, however, to make exactly two kinds of gradients; it will only be feasible 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%; } 

demonstration

Answer 5

Try the following:

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

jsfiddle here