Skip to content Skip to sidebar Skip to footer

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 t

Solution 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

<divclass="cutout"><divclass="island"><divid="circleText">Circle Text </div></div></div>

CSS

.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px150px at 50%100%, 
                                transparent 100px, #55550px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px150px 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;
}

Solution 2:

Try this one:

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

jsfiddle here

Solution 3:

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

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

Solution 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/

Solution 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(200px100px 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: 200px100px, 40%100%, 40%100%;
    background-repeat: no-repeat;
    background-position-x: 50%, 0%, 100%;
    background-position-y: 100%;
}

demo

Post a Comment for "Css Oval Shape Cut Out From Div"